VirtualList with input element inside

framework7io / framework7

Full featured HTML framework for building iOS & Android apps

http://framework7.io

MIT License

18.04k stars 3.23k forks source link

VirtualList with input element inside #4132

Open aporenta opened 1 year ago

aporenta commented 1 year ago

Framework7 version: latest (framework documentation)
Platform and Target: Android WebView, Chrome, (iOS not tested)
Sandbox: https://8yrxqx.csb.app/

Describe the bug

I tried to create Virtualist with input element inside. I works OK on Win10 Chrome browser. When I open virtuallist with input on Android Chrome or Android WebView and click on input field, virtual keyboard popups and dissapier at the next moment.

To Reproduce

Create app with VirtualList.
Inside every
element put element
Run this app on Android Chrome
Every time user clicks on this box, keyboard popup and hides next moment

I also try to change documention example on framework7 website. Inserted only on first item The same issue happened.

Expected behavior

When user clicks on input Android virtual keyboard must stay on screen.

Actual Behavior

Virtual keyboard popups, but next moment dissapier from screen

Simone4e commented 1 year ago

You need to use the input structure like that: https://codesandbox.io/s/solitary-bird-5c8ijf?file=/pages/home.html

As you can see from the code instead of use your structure i used input structure with item info layout

aporenta commented 1 year ago

Sorry, result on Android phone (maybe only on my Samsung S22 and Redmi Note 10) is the same....

Problem is not a design of , but Android virtual keyboard.... Try your link Test on Android phone. and try to change input value....

Screen recording: https://user-images.githubusercontent.com/3582031/218444457-4c7fd5de-990e-4a8c-a248-bcef36ba6b1e.mp4

Simone4e commented 1 year ago

You change something from my codesandbox because on mine work, i have s22 ultra.

aporenta commented 1 year ago

No, I didn't.

If I had changed Sandbox, app won't work on your machine also. It is the same link...

Simone4e commented 1 year ago

No, I didn't.

If I had changed Sandbox, app won't work on your machine also. It is the same link...

I understand now, it seems that the bug occurs only when you use a new window in codesandbox have you tried to see if exporting it in apk or putting it online works? could be a codesandbox problem

aporenta commented 1 year ago

Or, app running in Sandbox "sandbox-preview-container" behave differently then direct link app We are both right:

I didn't change Sandbox and app does not work with my link
Your link works I copied link from Sandbox Browser, you copied Master browser link. Results should be te same, but they are not.

Simone4e commented 1 year ago

No, I didn't. If I had changed Sandbox, app won't work on your machine also. It is the same link...

I understand now, it seems that the bug occurs only when you use a new window in codesandbox have you tried to see if exporting it in apk or putting it online works? could be a codesandbox problem

Try live version

aporenta commented 1 year ago

I don't think it is Sandbox problem.

I will try your solution in my app, with added all "input" classes. Maybe it will work... I think problem is with virtuallist refresh. I also tried this on Samsung Active Tab (slow machine Android 9) and problem does not occur

aporenta commented 1 year ago

No still same problem.

Also if I change classes to your structure (bottom image) virtual keyboard does not work. I still think that problem is in VL refresh.

Simone4e commented 1 year ago

I did several tests, I confirm the bug. @nolimits4web