diff --git a/src/modules/market/components/MarketFuzzySearch.vue b/src/modules/market/components/MarketFuzzySearch.vue index e796533..ec367f7 100644 --- a/src/modules/market/components/MarketFuzzySearch.vue +++ b/src/modules/market/components/MarketFuzzySearch.vue @@ -11,6 +11,8 @@ :model-value="searchQuery" @update:model-value="handleSearchChange" @keydown="handleKeydown" + @focus="handleFocus" + @blur="handleBlur" :placeholder="enhancedPlaceholder" :disabled="disabled" class="pl-10 pr-20" @@ -56,48 +58,54 @@ - -
-
Try searching for:
-
- + +
+ +
+
Try searching for:
+
+ +
-
- -
-
-
Recent searches:
- -
-
- + +
+
+
Recent searches:
+ +
+
+ +
@@ -267,7 +275,14 @@ const handleClear = () => { emit('search', '') emit('results', filteredItems.value) emit('clear') - searchInputRef.value?.focus() + + // Focus the input after clearing + if (searchInputRef.value) { + const inputElement = searchInputRef.value.$el?.querySelector('input') || searchInputRef.value.$el + if (inputElement && typeof inputElement.focus === 'function') { + inputElement.focus() + } + } } const handleKeydown = (event: KeyboardEvent) => { @@ -275,8 +290,11 @@ const handleKeydown = (event: KeyboardEvent) => { if (event.key === 'Escape') { if (searchQuery.value) { handleClear() - } else { - searchInputRef.value?.blur() + } else if (searchInputRef.value) { + const inputElement = searchInputRef.value.$el?.querySelector('input') || searchInputRef.value.$el + if (inputElement && typeof inputElement.blur === 'function') { + inputElement.blur() + } } event.preventDefault() } @@ -323,7 +341,14 @@ const handleGlobalKeydown = (event: KeyboardEvent) => { // ⌘K or Ctrl+K to focus search if ((event.metaKey || event.ctrlKey) && event.key === 'k') { event.preventDefault() - searchInputRef.value?.focus() + console.log('⌘K/Ctrl+K pressed, focusing search input', !!searchInputRef.value) + if (searchInputRef.value) { + // Access the underlying HTML input element from the Shadcn Input component + const inputElement = searchInputRef.value.$el?.querySelector('input') || searchInputRef.value.$el + if (inputElement && typeof inputElement.focus === 'function') { + inputElement.focus() + } + } } } @@ -335,20 +360,10 @@ watch(filteredItems, (items) => { // Setup and cleanup onMounted(() => { document.addEventListener('keydown', handleGlobalKeydown) - - if (searchInputRef.value) { - searchInputRef.value.addEventListener('focus', handleFocus) - searchInputRef.value.addEventListener('blur', handleBlur) - } }) onUnmounted(() => { document.removeEventListener('keydown', handleGlobalKeydown) - - if (searchInputRef.value) { - searchInputRef.value.removeEventListener('focus', handleFocus) - searchInputRef.value.removeEventListener('blur', handleBlur) - } })