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

[nevadavid]

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.

[tmorehouse]

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]

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

[tmorehouse]

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]

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]

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

[tmorehouse]

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.

[nevadavid]

@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]

Still not working, v2.7.0

[mtlynch]

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>

• Working example: https://q8vqe.csb.app/
• Source: https://codesandbox.io/s/bootstrap-vue-sandbox-q8vqe