-
+
+
+
+
+
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)
- }
})