fix(VSelect): resolve bug in Safari/Edge/IE with event order disparity (

#10620) The ordering of events in Safari/Edge/IE casued our manual blur of the input to break tabbing through inputs. Additionally resolving duplicate blur events. fix #10609
vuetifyjs · Feb 21, 2020 · 49cb28b · 49cb28b
1 parent 333588d
commit 49cb28b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/packages/vuetify/src/components/VSelect/VSelect.js b/packages/vuetify/src/components/VSelect/VSelect.js
@@ -257,11 +257,9 @@ export default VTextField.extend({
   methods: {
     /** @public */
     blur (e) {
+      VTextField.options.methods.blur.call(this, e)
       this.isMenuActive = false
-      this.isFocused = false
-      this.$refs.input && this.$refs.input.blur()
       this.selectedIndex = -1
-      this.onBlur(e)
     },
     /** @public */
     activateMenu () {
@@ -530,9 +528,6 @@ export default VTextField.extend({
     getValue (item) {
       return getPropertyFromItem(item, this.itemValue, this.getText(item))
     },
-    onBlur (e) {
-      this.$emit('blur', e)
-    },
     onChipInput (item) {
       if (this.multiple) this.selectItem(item)
       else this.setValue(null)

diff --git a/packages/vuetify/src/components/VTextField/VTextField.js b/packages/vuetify/src/components/VTextField/VTextField.js
@@ -204,8 +204,13 @@ export default VInput.extend({
       this.onFocus()
     },
     /** @public */
-    blur () {
-      this.$refs.input ? this.$refs.input.blur() : this.onBlur()
+    blur (e) {
+      // https://github.com/vuetifyjs/vuetify/issues/5913
+      // Safari tab order gets broken if called synchronous
+      window.requestAnimationFrame(() => {
+        this.$refs.input && this.$refs.input.blur()
+      })
+      this.onBlur(e)
     },
     clearableCallback () {
       this.internalValue = null
@@ -377,7 +382,7 @@ export default VInput.extend({
       // to persist
       this.internalChange = false
 
-      this.$emit('blur', e)
+      e && this.$emit('blur', e)
     },
     onClick () {
       if (this.isFocused || this.disabled) return

diff --git a/packages/vuetify/test/unit/components/VTextField/VTextField.spec.js b/packages/vuetify/test/unit/components/VTextField/VTextField.spec.js
@@ -745,7 +745,7 @@ test('VTextField.js', ({ mount }) => {
     expect(change).toHaveBeenCalledTimes(2)
   })
 
-  it('should have focus and blur methods', () => {
+  it('should have focus and blur methods', async () => {
     const wrapper = mount(VTextField)
     const focus = jest.fn()
     const blur = jest.fn()
@@ -756,6 +756,12 @@ test('VTextField.js', ({ mount }) => {
     expect(focus).toHaveBeenCalledTimes(1)
 
     wrapper.vm.blur()
+
+    // https://github.com/vuetifyjs/vuetify/issues/5913
+    // Blur waits a requestAnimationFrame
+    // to resolve a bug in MAC / Safari
+    await new Promise(resolve => window.requestAnimationFrame(resolve))
+
     expect(blur).toHaveBeenCalledTimes(1)
   })