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

Form Input component isn't change the value on predictive text #4724

Closed

Comments

@nevadavid
Copy link

@nevadavid nevadavid commented Feb 4, 2020

So when I enable the "Show correction suggestions" (or similar function on your phone) and type any characters on <b-form-input>, the input isn't changes except when I push space.

Expected behavior

Change value immediately when I type any character on predictive mode.

Versions

Libraries:

  • BootstrapVue: 2.4.0

Environment:

  • Device: Huawei
  • OS: Android
  • Browser: Chrome
  • Version: 79

There is my solution: https://codepen.io/nevadavid/pen/mdJbmgJ
(This is a very lightweight example, focus on the solution. For test I added a native input.)
It works well.

@nevadavid nevadavid changed the title <b-form-input> isn't change the value on predictive text Form Input component isn't change the value on predictive text Feb 4, 2020
@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Feb 4, 2020

This is probably related to the composition mode on the input event + change event.

Some mobile keyboards switch to composing mode when using predictive text/autocomplete, while same switch to the change event (but don't trigger an input event)

@nevadavid
Copy link
Author

@nevadavid nevadavid commented Feb 4, 2020

This is a similar (or same?) issue: vuejs/vue#9299
So it seems working as expected: vuejs/vue#9777 (comment)

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Feb 4, 2020

Yeat it is related... note that we can't use standard vue v-model as we are using render functions. So we have to implement some of Vue's features in the component. we may need to revisit and see what they have done to get around the issue

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Feb 7, 2020

I just tried on Samsung mobile with Chrome and autocomplete for suggested words is working for me.

Are you using the default keyboard or google keyboard (GBoard)?

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Feb 7, 2020

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Feb 7, 2020

Actually, I don't think the above PR will fix the issue, after reading more on how GBoard handles predictive text (using Composition events instead of input/change events like other mobile keyboards do), although it will fix other issues where change is not getting fired correctly.

tmorehouse added a commit that referenced this issue Feb 8, 2020
@nevadavid
Copy link
Author

@nevadavid nevadavid commented Feb 10, 2020

@nevadavid Could you try testing the input here https://deploy-preview-4739--bootstrap-vue.netlify.com/docs/components/form-input/

@tmorehouse I am using default Android keyboard, it's still not working.

@ShinZ6
Copy link

@ShinZ6 ShinZ6 commented Mar 18, 2020

Still not working, v2.7.0

@mtlynch
Copy link

@mtlynch mtlynch commented May 1, 2020

In case anyone else runs into this, I've found the following workaround:

<b-form-input type="text" @input.native="val = $event.target.value"></b-form-input>

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