Autocomplete Suggestion Box Cover's Text Box on Mobile

[antletem]

Describe the bug
On a mobile device, the suggestion box of the autocomplete covers the text box. This makes it unclear as the user is still typing out their search text.

Version
pulished

To Reproduce
Steps to reproduce the behaviour (including a clone link when applicable):

1. Set up an autocomplete
2. access your code via mobile device
3. type in autocomplete text box
4. See error

Expected behavior
The suggestions should appear as they are in the web browser (below the text box).

Screenshots

Web Browser:

Mobile Device:

I am considering making a PR for this issue
No

[Csirobi]

Hi,

I can reproduce this problem in the web browser (Firefox v112.02), too.

[s-cork]

@antletem Can I have a clone link of a minimal example?
I don't see this on the demo app I have locally in IOS, but it could also be a conflict in some css.
Could you add information about the browser/device you're using.

@Csirobi Is this all browsers or just firefox?
Again I don't see this, so it's difficult to fix.
Clone link and steps to reproduce would be helpful.

[antletem]

Of course!

Here is a live demo

Here is the clone

I was using my windows laptop on edge browser with the mobile mode enabled as well as safari/edge on my Iphone 13.

It is the same situation across all three scenarios. This is using the material design template.

[Csirobi]

Hi,

This the demo
Type the "a", and you can see the problem..

To Reproduce

1. Login to your account and create a new & empty app, such as: Blank app -> Custom HTML -> Blank Panel.
2. In the Design tab, drag&drop a Autocomplete component to the Form in the app.
3. In the Suggestions, initialize the component. (a, aa, aaa)
4. Try to run it, and type the "a" into the textbox..

Thx

[Csirobi]

Hi,

I have managed to find the problem: the core of it is the anvil banner at the top of the page for the free cloud users.
When this banner is visible, the whole app pulls down, however the position of the autocomplete popup window is not calculated correctly.
In the localhost, this problem can not be reproduced.

Thx

[s-cork]

@Csirobi thanks for the digging. There is a pr that fixes this issue. See the thread above where the PR is linked. When that's merged then you can see if the development branch fixes the issue.

[s-cork]

@Csirobi this is now merged so if you switch to the development branch of anvil-extras let us know if it's not fixed.

[Csirobi]

It works, thx.