fix(quasar): Enhance QField focusing logic (QInput and QSelect) (#3737)

quasarframework · Mar 30, 2019 · 3163e92 · 3163e92
1 parent 27a7047
commit 3163e92
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 50 deletions.
diff --git a/quasar/src/components/field/QField.js b/quasar/src/components/field/QField.js
@@ -150,6 +150,21 @@ export default Vue.extend({
   },
 
   methods: {
+    focus () {
+      let target = this.$refs.target
+      if (target !== void 0) {
+        target.matches('[tabindex]') || (target = target.querySelector('[tabindex]'))
+        target !== null && target.focus()
+      }
+    },
+
+    blur () {
+      const el = document.activeElement
+      if (this.$el.contains(el)) {
+        el.blur()
+      }
+    },
+
     __getContent (h) {
       const node = []
 
@@ -311,24 +326,15 @@ export default Vue.extend({
         this.focused = true
         this.$listeners.focus !== void 0 && this.$emit('focus', e)
       }
-
-      let target = this.$refs.target || this.$refs.input
-      if (e.target === this.$refs.control && target !== void 0) {
-        target.matches('[tabindex]') || (target = target.querySelector('[tabindex]'))
-        target !== null && target.focus()
-      }
     },
 
     __onControlFocusout (e) {
       setTimeout(() => {
-        if (document.hasFocus() === true) {
-          if (this.$refs === void 0 || this.$refs.control === void 0) {
-            return
-          }
-
-          if (this.$refs.control.contains(document.activeElement) !== false) {
-            return
-          }
+        if (
+          document.hasFocus() === true &&
+          (this.$refs === void 0 || this.$refs.control === void 0 || this.$refs.control.contains(document.activeElement) !== false)
+        ) {
+          return
         }
 
         if (this.focused === true) {
@@ -381,6 +387,7 @@ export default Vue.extend({
     this.controlEvents = this.__getControlEvents !== void 0
       ? this.__getControlEvents()
       : {
+        focus: this.focus,
         focusin: this.__onControlFocusin,
         focusout: this.__onControlFocusout
       }

diff --git a/quasar/src/components/input/QInput.js b/quasar/src/components/input/QInput.js
@@ -80,10 +80,6 @@ export default Vue.extend({
       this.$refs.input.focus()
     },
 
-    blur () {
-      this.$refs.input.blur()
-    },
-
     __onInput (e) {
       const val = e.target.value
 

diff --git a/quasar/src/components/select/QSelect.js b/quasar/src/components/select/QSelect.js
@@ -222,10 +222,6 @@ export default Vue.extend({
   },
 
   methods: {
-    focus () {
-      this.$refs.control.focus()
-    },
-
     removeAtIndex (index) {
       if (index > -1 && index < this.innerValue.length) {
         if (this.multiple === true) {
@@ -541,7 +537,7 @@ export default Vue.extend({
     __getControlEvents () {
       return {
         click: this.__onControlClick,
-        mousedown: this.__onControlMouseDown,
+        focus: this.focus,
         focusin: this.__onControlFocusin,
         focusout: this.__onControlFocusout
       }
@@ -757,8 +753,6 @@ export default Vue.extend({
     },
 
     __onControlClick () {
-      this.focus()
-
       if (this.menu === true) {
         this.menu = false
         this.__onFilterAbort()
@@ -773,40 +767,33 @@ export default Vue.extend({
       }
     },
 
-    __onControlMouseDown (e) {
-      if (e.target !== void 0 && !e.target.classList.contains('q-select__input')) {
-        stopAndPrevent(e)
-      }
-    },
-
     __onControlFocusin (e) {
-      const target = this.$refs.target
-      if (this.editable === true && this.focused === false) {
-        this.focused = true
-        this.$listeners.focus !== void 0 && this.$emit('focus', e)
-
-        if (this.useInput === true && this.inputValue.length > 0 && target !== void 0) {
-          target.setSelectionRange(0, this.inputValue.length)
+      if (this.editable === true) {
+        if (this.focused === false) {
+          this.focused = true
+          this.$listeners.focus !== void 0 && this.$emit('focus', e)
+
+          const target = this.$refs.target
+          if (target !== void 0 && this.useInput === true && this.inputValue.length > 0) {
+            target.setSelectionRange(0, this.inputValue.length)
+          }
+        }
+        else if (this.menu === true && e !== void 0 && e.target !== this.$refs.target && this.$refs.menu.contains(e.target) === false) {
+          this.menu = false
+          this.__onFilterAbort()
         }
-      }
-
-      if (e.target === this.$refs.control && target !== void 0) {
-        target.focus()
       }
     },
 
     __onControlFocusout (e) {
       setTimeout(() => {
         clearTimeout(this.inputTimer)
 
-        if (document.hasFocus() === true) {
-          if (this.$refs === void 0 || this.$refs.control === void 0) {
-            return
-          }
-
-          if (this.$refs.control.contains(document.activeElement) !== false) {
-            return
-          }
+        if (
+          document.hasFocus() === true &&
+          (this.$refs === void 0 || this.$refs.control === void 0 || this.$refs.control.contains(document.activeElement) !== false)
+        ) {
+          return
         }
 
         if (this.focused === true) {