google / google/material-design-lite

Problem with input fields through Android WebView

Open
#5,237 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
32.2k
Forks
4.9k
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.