Add a Tab handler on the Search button

WordPress · Oct 10, 2022 · f6d01f6 · f6d01f6
1 parent c203022
commit f6d01f6
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/src/components/VHeader/VSearchBar/VSearchBar.vue b/src/components/VHeader/VSearchBar/VSearchBar.vue
@@ -33,7 +33,12 @@
         <!-- @slot Extra information such as loading message or result count goes here. -->
         <slot />
       </VInputField>
-      <VSearchButton type="submit" :size="size" :route="route" />
+      <VSearchButton
+        type="submit"
+        :size="size"
+        :route="route"
+        @keydown.tab="handleSearchBlur"
+      />
     </form>
     <VRecentSearches
       v-show="isNewHeaderEnabled && isRecentVisible"
@@ -135,6 +140,9 @@ export default defineComponent({
     const handleBlur = () => {
       isRecentVisible.value = false
     }
+    const handleSearchBlur = () => {
+      if (!entries.value.length) handleBlur()
+    }
     onClickOutside(searchBarEl, handleBlur)
 
     /* Recent searches */
@@ -231,6 +239,7 @@ export default defineComponent({
 
       handleFocus,
       handleBlur,
+      handleSearchBlur,
 
       isNewHeaderEnabled,
       isRecentVisible,