fix(VSelect): replace onfocusout with onAfterleave (#17218)

fixes #17214
vuetifyjs · May 3, 2023 · 36e75c2 · 36e75c2
1 parent 1f6b2b3
commit 36e75c2
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 22 deletions.
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -247,19 +247,16 @@ export const VAutocomplete = genericComponent<new <
     }
 
     function onAfterLeave () {
-      if (isFocused.value) isPristine.value = true
+      if (isFocused.value) {
+        isPristine.value = true
+        vTextFieldRef.value?.focus()
+      }
     }
 
     function onFocusin (e: FocusEvent) {
       isFocused.value = true
     }
 
-    function onFocusout (e: FocusEvent) {
-      if (e.relatedTarget == null) {
-        vTextFieldRef.value?.focus()
-      }
-    }
-
     const isSelecting = ref(false)
 
     function select (item: InternalItem) {
@@ -370,7 +367,6 @@ export const VAutocomplete = genericComponent<new <
                       selectStrategy={ props.multiple ? 'independent' : 'single-independent' }
                       onMousedown={ (e: MouseEvent) => e.preventDefault() }
                       onFocusin={ onFocusin }
-                      onFocusout={ onFocusout }
                     >
                       { !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? (
                         <VListItem title={ t(props.noDataText) } />

diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -293,7 +293,10 @@ export const VCombobox = genericComponent<new <
       }
     }
     function onAfterLeave () {
-      if (isFocused.value) isPristine.value = true
+      if (isFocused.value) {
+        isPristine.value = true
+        vTextFieldRef.value?.focus()
+      }
     }
     function select (item: InternalItem) {
       if (props.multiple) {
@@ -324,12 +327,6 @@ export const VCombobox = genericComponent<new <
       isFocused.value = true
     }
 
-    function onFocusout (e: FocusEvent) {
-      if (e.relatedTarget == null) {
-        vTextFieldRef.value?.focus()
-      }
-    }
-
     watch(filteredItems, val => {
       if (!val.length && props.hideNoData) menu.value = false
     })
@@ -404,7 +401,6 @@ export const VCombobox = genericComponent<new <
                       selectStrategy={ props.multiple ? 'independent' : 'single-independent' }
                       onMousedown={ (e: MouseEvent) => e.preventDefault() }
                       onFocusin={ onFocusin }
-                      onFocusout={ onFocusout }
                     >
                       { !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? (
                         <VListItem title={ t(props.noDataText) } />

diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -233,14 +233,14 @@ export const VSelect = genericComponent<new <
         menu.value = false
       }
     }
-    function onFocusin (e: FocusEvent) {
-      isFocused.value = true
-    }
-    function onFocusout (e: FocusEvent) {
-      if (e.relatedTarget == null) {
+    function onAfterLeave () {
+      if (isFocused.value) {
         vTextFieldRef.value?.focus()
       }
     }
+    function onFocusin (e: FocusEvent) {
+      isFocused.value = true
+    }
 
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip)
@@ -296,6 +296,7 @@ export const VSelect = genericComponent<new <
                   openOnClick={ false }
                   closeOnContentClick={ false }
                   transition={ props.transition }
+                  onAfterLeave={ onAfterLeave }
                   { ...props.menuProps }
                 >
                   { hasList && (
@@ -305,7 +306,6 @@ export const VSelect = genericComponent<new <
                       selectStrategy={ props.multiple ? 'independent' : 'single-independent' }
                       onMousedown={ (e: MouseEvent) => e.preventDefault() }
                       onFocusin={ onFocusin }
-                      onFocusout={ onFocusout }
                     >
                       { !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? (
                         <VListItem title={ t(props.noDataText) } />