Typeahead content cannot be seen until soft keyboard is minimised (Android)

[lilmaxclara]

This is quite a strange bug, so I'm going to try to provide as much info as possible.

There seems to be an issue with some Android devices displaying any typeahead content until the soft keyboard minimised.

https://user-images.githubusercontent.com/106310683/200555324-63007cfb-d5bb-4104-9e14-6017fb52ab92.mp4

In the above video, the white part taking up half the screen is the Android native soft keyboard, notice that its only when this keyboard is minimised does any typeahead content appear.

Other typeaheads like https://uiv.wxsm.space/components/typeahead.html seem to work fine (they show typeahead content before soft keyboard is minimised) with the same setup.

I tested with your test website here https://vue3-simple-typeahead-demo.netlify.app , I tested with a Nexus 5, Android 8.1.0, tested with latest versions of Chrome, Brave and Firefox and all produce the same result. So I'm wondering if this has to do with the keyboard implementation or focus implementation. I've also see the issue on a Samsung S10 using Brave.

Haven't found a way to reproduce this issue in any other way than testing on a real phone

[frikinside]

wow! Great report, very nice work, and weird poltergeist that you find! I made a few tests and reproduce the issue without problems,

I'm not really sure what's the problem here, but I suspect (like you pointed out) that has to be some event management problem. I'm using focus and input events to show and filter the list of suggestions, I'll try to solve this as soon as I can (maybe this weekend).

Thanks a lot for this thorough report!

[frikinside]

P.D. Now I see that the demo doesn't behave responsively, I'll try to fix that too.

[lilmaxclara]

So a little update to this, it seems to be related to Gboard not sending keydown events properly, lots of other people facing the same issue. Can see an open issue here still looking into possible fixes

[lilmaxclara]

Still testing, but it seems a partial fix is

in the typeahead component in the vue template use

@compositionupdate="compositionUpdate($event)"

use this alongside @onInput

Then create a method which catches the $event, and modify the input directly using the typeahead component refs, this is not very clean but a solution which seems to work for now, I will update with any issues

compositionUpdate(event) { this.$refs.refSimpleTypeahead.input = event.data },