fix(QInput/QSelect): Prevent composition on android when codepoint is…

… below 256 close quasarframework#4578
pdanpdan · Jul 9, 2019 · afeff6d · afeff6d
1 parent ee3db9f
commit afeff6d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 11 deletions.
diff --git a/ui/src/components/input/QInput.js b/ui/src/components/input/QInput.js
@@ -162,6 +162,12 @@ export default Vue.extend({
       e.target.composing = true
     },
 
+    __onCompositionUpdate (e) {
+      if (typeof e.data === 'string' && e.data.codePointAt(0) < 256) {
+        e.target.composing = false
+      }
+    },
+
     __onCompositionEnd (e) {
       if (e.target.composing !== true) { return }
       e.target.composing = false
@@ -189,6 +195,10 @@ export default Vue.extend({
         blur: stop
       }
 
+      if (this.$q.platform.is.android === true) {
+        on.compositionupdate = this.__onCompositionUpdate
+      }
+
       if (this.hasMask === true) {
         on.keydown = this.__onMaskedKeydown
       }

diff --git a/ui/src/components/select/QSelect.js b/ui/src/components/select/QSelect.js
@@ -798,6 +798,12 @@ export default Vue.extend({
       e.target.composing = true
     },
 
+    __onCompositionUpdate (e) {
+      if (typeof e.data === 'string' && e.data.codePointAt(0) < 256) {
+        e.target.composing = false
+      }
+    },
+
     __onCompositionEnd (e) {
       if (e.target.composing !== true) { return }
       e.target.composing = false
@@ -806,6 +812,22 @@ export default Vue.extend({
     },
 
     __getInput (h) {
+      const on = {
+        input: this.__onInputValue,
+        // Safari < 10.2 & UIWebView doesn't fire compositionend when
+        // switching focus before confirming composition choice
+        // this also fixes the issue where some browsers e.g. iOS Chrome
+        // fires "change" instead of "input" on autocomplete.
+        change: this.__onCompositionEnd,
+        compositionstart: this.__onCompositionStart,
+        compositionend: this.__onCompositionEnd,
+        keydown: this.__onTargetKeydown
+      }
+
+      if (this.$q.platform.is.android === true) {
+        on.compositionupdate = this.__onCompositionUpdate
+      }
+
       return h('input', {
         ref: 'target',
         staticClass: 'q-select__input q-placeholder col',
@@ -819,17 +841,7 @@ export default Vue.extend({
           ...this.$attrs,
           disabled: this.editable !== true
         },
-        on: {
-          input: this.__onInputValue,
-          // Safari < 10.2 & UIWebView doesn't fire compositionend when
-          // switching focus before confirming composition choice
-          // this also fixes the issue where some browsers e.g. iOS Chrome
-          // fires "change" instead of "input" on autocomplete.
-          change: this.__onCompositionEnd,
-          compositionstart: this.__onCompositionStart,
-          compositionend: this.__onCompositionEnd,
-          keydown: this.__onTargetKeydown
-        }
+        on
       })
     },