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

v-model did not handle CompositionEvent on Android #7367

Closed

Comments

@LeuisKen
Copy link

LeuisKen commented Jan 3, 2018

Version

2.5.13

Reproduction link

https://codepen.io/LeuisKen/pen/ZvydmK?editors=1010

Steps to reproduce

1、Chrome 63 on Android, select the input tag;
2、Use IME, such as Google Japanese in example;
3、Inputing contents.

screenrecorder-2018-01-03-11-22-53-570

What is expected?

Update data only when compositionend event fired, according to issue:
#5158 (comment)

What is actually happening?

See the screen shot in Steps to reproduce, v-model sync the input data when compositionend not fired.


Suggestion: Replacing isAndroid check in code https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/directives/model.js#L42 with window.CompositionEvent.

@LeuisKen
Copy link
Author

LeuisKen commented Jan 3, 2018

Giving pull request according to my suggestion: #7368

@HerringtonDarkholme
Copy link
Member

HerringtonDarkholme commented Jan 4, 2018

Thanks, it sounds reasonable. Any suggestion? @ktsn @kazupon ? OP suggests that v-model should only update value after CompositionEnd if composition happens, as discussed in #5158 (comment). This especially affects Japanese Input on Android, other IME like Google Chinese input doesn't exhibit the problem at all.

The Android check dates back long ago. It looks like we just leave it untouched in the code base.

Yup, Chinese input just stop firing input event during composing. Japanese Input correctly fires input and correctly set event.isComposing to true. However, Vue uses e.target.isComposing not e.isComposing.

https://jsfiddle.net/ov5jqqss/

BTW, a very whitey test case that almost valuable to be collected in an album, hehe.

@LeuisKen LeuisKen changed the title 安卓端v-model未对CompositionEvent进行相关处理 v-model did not handle CompositionEvent on Android Jan 4, 2018
@LeuisKen
Copy link
Author

LeuisKen commented Jan 4, 2018

Translate to English for more extensive discussion.
Thank you for your reasonable reply and respect.😄

@b-jan
Copy link

b-jan commented May 12, 2018

Hi there,

I am actually developing an application (in Nuxt.js) where I need the exact behaviour you reported.

My application has not the expected behaviour on Android. I need the v-model binding to behave when composing on Android keyboard. On Iphone, everything is working. How can we fix that?

Thank you :)

f2009 pushed a commit to f2009/vue that referenced this issue Jan 25, 2019
Previously the installation was skipped on Android because
it was not needed for Chinese IME - however some IMEs such
as Japanese exhibits the same behavior as on other browers.

So it is safer to always enable the check. Closes vuejs#7367
aJean pushed a commit to aJean/vue that referenced this issue Aug 19, 2020
Previously the installation was skipped on Android because
it was not needed for Chinese IME - however some IMEs such
as Japanese exhibits the same behavior as on other browers.

So it is safer to always enable the check. Closes vuejs#7367
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment