Skip to content

Commit 4a8d27e

Browse files
committed
fix(landing): disable search during auto-typing animation
Bug: Clicking Search mid-animation searched partial text like 'authen' Fix: Added autoTyping prop to HeroSearch, button disabled during animation - User can only search after manually typing - Pressing Enter during animation does nothing - Once user interacts, isTyping=false and search works normally
1 parent 7dd0405 commit 4a8d27e

2 files changed

Lines changed: 7 additions & 4 deletions

File tree

frontend/src/components/landing/Hero.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,7 @@ export function Hero({ onResultsReady }: Props) {
196196
onSubmit={() => { setIsTyping(false); search() }}
197197
searching={loading}
198198
repoName={repo.name}
199+
autoTyping={isTyping}
199200
/>
200201
</div>
201202
</motion.div>

frontend/src/components/landing/HeroSearch.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,14 +57,15 @@ interface Props {
5757
onSubmit: () => void
5858
searching?: boolean
5959
repoName?: string
60+
autoTyping?: boolean
6061
}
6162

6263
export interface HeroSearchHandle {
6364
focus: () => void
6465
}
6566

6667
export const HeroSearch = forwardRef<HeroSearchHandle, Props>(function HeroSearch(
67-
{ value, onChange, onSubmit, searching = false, repoName = 'flask' },
68+
{ value, onChange, onSubmit, searching = false, repoName = 'flask', autoTyping = false },
6869
ref
6970
) {
7071
const inputRef = useRef<HTMLInputElement>(null)
@@ -90,9 +91,10 @@ export const HeroSearch = forwardRef<HeroSearchHandle, Props>(function HeroSearc
9091

9192
const submit = (e: React.FormEvent) => {
9293
e.preventDefault()
93-
if (value.trim()) onSubmit()
94+
if (value.trim() && !autoTyping) onSubmit()
9495
}
9596

97+
const canSearch = value.trim() && !autoTyping && !searching
9698
const showAnimatedPlaceholder = !value && !focused
9799

98100
return (
@@ -169,10 +171,10 @@ export const HeroSearch = forwardRef<HeroSearchHandle, Props>(function HeroSearc
169171

170172
<button
171173
type="submit"
172-
disabled={searching || !value.trim()}
174+
disabled={!canSearch}
173175
className={cn(
174176
'px-5 py-2 rounded-xl font-medium transition-all',
175-
value.trim() && !searching
177+
canSearch
176178
? 'bg-[var(--python-blue)] text-white hover:opacity-90'
177179
: 'bg-zinc-100 text-zinc-400 dark:bg-zinc-800 dark:text-zinc-500 cursor-not-allowed'
178180
)}

0 commit comments

Comments
 (0)