Dropdown search don't work with Gboard

[reencafesas]

Hello,

the search in the dropdown component does not search and does not work correctly when using the google keyboard, many users bring this keyboard by default, the error is reproducible from any phone with updated gboard even in beta phase

[ x] bug report

• PrimeVue version: 3.6.0

• Browser: [Mobile Chrome | Android X.X Web Browser]

[mertsincan]

Hi,

Thanks a lot for the gifs! But, It is quite difficult for me to replicate this problem. That's why I prepared two different codesandbox links for you.

1. https://codesandbox.io/s/distracted-silence-7zcn0?file=/index.html What are the outputs for both keyboards?
2. https://codesandbox.io/s/crazy-allen-2jvuc?file=/src/DropdownDemo.vue Please see Dropdown.computed.visibleOptions method in main.js. Could you please debug it? What is the this.filterValue?

Best Regards,

[JuanCRdrums]

In the first link everything worked fine: Everything that was written in the text input appeared in the alert. However, when testing with the Google keyboard on the second link, the alert is not always displayed. With other keyboards it works fine, but not with the Google keyboard.

[reencafesas]

Hi,

Thanks a lot for the gifs! But, It is quite difficult for me to replicate this problem. That's why I prepared two different codesandbox links for you.

1. https://codesandbox.io/s/distracted-silence-7zcn0?file=/index.html What are the outputs for both keyboards?
2. https://codesandbox.io/s/crazy-allen-2jvuc?file=/src/DropdownDemo.vue Please see Dropdown.computed.visibleOptions method in main.js. Could you please debug it? What is the this.filterValue?

Best Regards,

Carefully debugging the google keyboard, it is identified that this one, unlike the other keyboards, enters the onFilterChange event but never enters the computed visibleOptions, the other keyboards first enter computed visibleOptions and then pass to onFilterChange, this is extremely serious 95% of devices have this keyboard and in all the error appears

[reencafesas]

Hi @mertsincan

a greeting, I have tried to modify the nuget package in the Dropdown.vue file but it has not been possible, however I have detected as a temporary solution to use the quasar dropdown and I started to review its behavior and you find this fragment

// 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.
onChange: onComposition,
onKeydown: onTargetKeydown,
onKeyup: onTargetAutocomplete,
onKeypress: onTargetKeypress,
onFocus: selectInputText,

<input type="text" ref="filterInput" v-model="filterValue" @vnode-updated="onFilterUpdated" autoComplete="off" class="p-dropdown-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeyDown" @input="onFilterChange"/>

In primevue we have an @input event on line 24, is it possible to change this to an @change to mitigate the problem?

Thanks