Revert "fix(quasar): Enhance QField focusing logic (QInput and QSelec…

…t) (#3737)" This reverts commit 4d643d6.
quasarframework · Mar 30, 2019 · 7df7390 · 7df7390
1 parent 5885dde
commit 7df7390
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 40 deletions.
diff --git a/quasar/src/components/field/QField.js b/quasar/src/components/field/QField.js
@@ -150,21 +150,6 @@ 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 = []
 
@@ -326,15 +311,24 @@ 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 &&
-          (this.$refs === void 0 || this.$refs.control === void 0 || this.$refs.control.contains(document.activeElement) !== false)
-        ) {
-          return
+        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 (this.focused === true) {
@@ -387,7 +381,6 @@ 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,6 +80,10 @@ 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,6 +222,10 @@ export default Vue.extend({
   },
 
   methods: {
+    focus () {
+      this.$refs.control.focus()
+    },
+
     removeAtIndex (index) {
       if (index > -1 && index < this.innerValue.length) {
         if (this.multiple === true) {
@@ -537,7 +541,7 @@ export default Vue.extend({
     __getControlEvents () {
       return {
         click: this.__onControlClick,
-        focus: this.focus,
+        mousedown: this.__onControlMouseDown,
         focusin: this.__onControlFocusin,
         focusout: this.__onControlFocusout
       }
@@ -753,6 +757,8 @@ export default Vue.extend({
     },
 
     __onControlClick () {
+      this.focus()
+
       if (this.menu === true) {
         this.menu = false
         this.__onFilterAbort()
@@ -767,33 +773,40 @@ export default Vue.extend({
       }
     },
 
+    __onControlMouseDown (e) {
+      if (e.target !== void 0 && !e.target.classList.contains('q-select__input')) {
+        stopAndPrevent(e)
+      }
+    },
+
     __onControlFocusin (e) {
-      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()
+      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 (e.target === this.$refs.control && target !== void 0) {
+        target.focus()
+      }
     },
 
     __onControlFocusout (e) {
       setTimeout(() => {
         clearTimeout(this.inputTimer)
 
-        if (
-          document.hasFocus() === true &&
-          (this.$refs === void 0 || this.$refs.control === void 0 || this.$refs.control.contains(document.activeElement) !== false)
-        ) {
-          return
+        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 (this.focused === true) {