Skip to content

Commit aa13075

Browse files
ericyangpanclaude
andcommitted
fix(search): prevent autocomplete dropdown opening on mount
Add user interaction tracking to SearchInput component to prevent the autocomplete dropdown from automatically opening when the component mounts with query parameters in the URL. The dropdown now only opens after the user has interacted with the input field (typing or focusing). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 966e5f2 commit aa13075

File tree

1 file changed

+13
-1
lines changed

1 file changed

+13
-1
lines changed

src/components/controls/SearchInput.tsx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export default function SearchInput({
2626
const inputRef = useRef<HTMLInputElement>(null)
2727
const dropdownRef = useRef<HTMLDivElement>(null)
2828
const debounceTimerRef = useRef<NodeJS.Timeout | null>(null)
29+
const hasUserInteracted = useRef(false)
2930

3031
const placeholderText = placeholder || t('components.header.searchPlaceholder')
3132

@@ -39,7 +40,10 @@ export default function SearchInput({
3940
debounceTimerRef.current = setTimeout(() => {
4041
const results = getAutocompleteSuggestions(query)
4142
setSuggestions(results)
42-
setIsOpen(results.length > 0)
43+
// Only auto-open dropdown if user has interacted with the input
44+
if (hasUserInteracted.current && results.length > 0) {
45+
setIsOpen(true)
46+
}
4347
setSelectedIndex(-1)
4448
}, 300)
4549
} else {
@@ -74,6 +78,8 @@ export default function SearchInput({
7478

7579
const handleInputChange = (value: string) => {
7680
setQuery(value)
81+
// Mark as user interaction to allow dropdown to open
82+
hasUserInteracted.current = true
7783
}
7884

7985
const handleSearch = (searchQuery: string) => {
@@ -120,6 +126,12 @@ export default function SearchInput({
120126
value={query}
121127
onChange={e => handleInputChange(e.target.value)}
122128
onKeyDown={handleKeyDown}
129+
onFocus={() => {
130+
hasUserInteracted.current = true
131+
if (query.trim() && suggestions.length > 0) {
132+
setIsOpen(true)
133+
}
134+
}}
123135
placeholder={placeholderText}
124136
className="w-full px-[var(--spacing-sm)] py-1 text-sm border border-[var(--color-border)] bg-[var(--color-background)] text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:outline-none focus:border-[var(--color-border-strong)] transition-colors"
125137
/>

0 commit comments

Comments
 (0)