Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IME composition support #4482

Closed
0141KoppePan opened this issue Jun 27, 2019 · 3 comments
Closed

IME composition support #4482

0141KoppePan opened this issue Jun 27, 2019 · 3 comments

Comments

@0141KoppePan
Copy link

0141KoppePan commented Jun 27, 2019

Is your feature request related to a problem? Please describe.
In vue.js v-model doesn't get updated during IME (Chinese, Japanese, Korean etc.) composition.But Quasar input v-model is not.

Describe the solution you'd like
Like Vue.js use compositionstart and compositionend events.
https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/directives/model.js#L37-L38

Describe alternatives you've considered

--- QInput.original.js	2019-06-27 09:32:39.437264878 +0900
+++ QInput.js	2019-06-27 09:39:49.679331055 +0900
@@ -21,6 +21,8 @@
 
     debounce: [String, Number],
 
+    compose: Boolean,
+
     maxlength: [Number, String],
     autogrow: Boolean, // makes a textarea
 
@@ -72,7 +74,10 @@
   },
 
   data () {
-    return { innerValue: this.__getInitialMaskedValue() }
+    return {
+      innerValue: this.__getInitialMaskedValue(),
+      composing: false
+    }
   },
 
   computed: {
@@ -115,6 +120,15 @@
       this.autogrow === true && this.__adjustHeight()
     },
 
+    __onCompositionStart () {
+      this.composing = true;
+    },
+
+    __onCompositionEnd () {
+      if (!this.composing) return;
+      this.composing = false
+    },
+
     __emitValue (val, stopWatcher) {
       const fn = () => {
         if (
@@ -126,7 +140,11 @@
 
         if (this.value !== val) {
           stopWatcher === true && (this.stopValueWatcher = true)
-          this.$emit('input', val)
+	  if (this.compose) {
+            !this.composing && this.$emit('input', val)
+          } else {
+            this.$emit('input', val)
+          }
         }
       }
 
@@ -157,7 +175,9 @@
         ...this.$listeners,
         input: this.__onInput,
         focus: stop,
-        blur: stop
+        blur: stop,
+        compositionstart: this.__onCompositionStart,
+        compositionend: this.__onCompositionEnd
       }
 
       if (this.hasMask === true) {
@rstoenescu
Copy link
Member

rstoenescu commented Jun 28, 2019

Hi,

Thanks for reporting this!

Would you be so kind to contact me on Discord? Want some help on fully testing the fix (my commit above). Would be lovely if this happens before I release the final 1.0.0 this Sunday.

Thanks in advance! -Razvan Stoenescu

@baryon
Copy link

baryon commented Apr 27, 2021

From v1.15.6, The bug has reproduced. @rstoenescu
v1.15.5 works

@dolphin836
Copy link

Still not available in the 2.12.1 version

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants