search

google / material-design-lite

Material Design Components in HTML/CSS/JS
https://getmdl.io
Apache License 2.0
32.27k stars 5.04k forks source link

Problem with input fields through Android WebView #5237

Open jonathanlundstrom opened 6 years ago

jonathanlundstrom commented 6 years ago

Hi,

We have an application that is built in Laravel with MDL as a basis for the front-end and using Vue.js as the front-end framework. Our app was initially only intended to be consumed as a standalone PWA but we then decided to develop native app wrappers.

The problem we are experiencing is that if we try to type user input into any input field, the cursor just blinks, the item loses focus and the text is instantly erased, leaving an empty field. We've tried so many workarounds to get around this, but it seems the complex HTML structure of MDL doesn't play well with the Android WebView framework.

We're using MDL version 1.3.0 and this bug only appears for users who are running our Android app where the web-app is being shown through a WebView. It's also persistent across versions, so everything from Android 6-9 and all different brands and phones.

There are no certain steps to reproduce it, input fields simply don't work. Unfortunately as this is a locked down commercial project I have nothing to show you other than a simple explanation from this SO thread: https://stackoverflow.com/a/9500715/739557.

We've been debugging this for weeks and come to the conclusion that there is nothing wrong with the app nor the way it handles focus. The WebView just is not capable of handling input alongside the MDL framework. And it's not only MDL fields. It's any fields that reside in the complex MDL structure of nested fixed elements etc.

Please, is there anyone with a fix? If we can't solve this then we need to scrap MDL and completely re-do the UI of our entire service.

Thanks. Jonathan

ahmedaniss25 commented 4 years ago

i fix this issue here https://youtu.be/QTSqnqoESY4

jonathanlundstrom commented 4 years ago

@ahmedaniss25, unfortunately your video has been removed :(