Textfield behaves abnormally when Flutter Web App is loaded on some android devices running Webview on a native Android app #67291
Description
I built a flutter app and ran to on web and it works pretty smoothly.
But when I load the same webapp on an android webview, the textfield behaves abnormally in the webview.
Expected results: Textfield should behave normally.
Actual results: Text field behaves abnormally. The cursor position changes with extra spaces at the end of the text, as the text length increases.
Please refer gif:
Flutter web app link : https://ashank96.github.io/build/web/
Android Native web-view code
package com.ashank.nativeflutterwebview;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.text.TextUtils;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = findViewById(R.id.webView);
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return false;
}
});
webView.getSettings().setJavaScriptEnabled(true);
webView.setVerticalScrollBarEnabled(true);
webView.setHorizontalScrollBarEnabled(true);
webView.loadUrl("https://ashank96.github.io/build/web/");
}
}
Logs
[✓] Flutter (Channel beta, 1.22.0, on Mac OS X 10.15.4 19E287, locale en-IN)
• Flutter version 1.22.0 at /Users/ashankbharati/Applications/flutter
• Framework revision d408d302e2 (6 days ago), 2020-09-29 11:49:17 -0700
• Engine revision 5babba6c4d
• Dart version 2.10.0
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
• Android SDK at /Users/ashankbharati/Library/Android/sdk
• Platform android-30, build-tools 29.0.3
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
• All Android licenses accepted.
[✗] Xcode - develop for iOS and macOS
✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
Download at: https://developer.apple.com/xcode/download/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install:
sudo gem install cocoapods
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 4.0)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 47.1.2
• Dart plugin version 193.7361
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
[!] IntelliJ IDEA Community Edition (version 2018.3.2)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
• For information about installing plugins, see
https://flutter.dev/intellij-setup/#installing-the-plugins
[✓] Connected device (3 available)
• SM M315F (mobile) • RZ8N60E21VM • android-arm64 • Android 10 (API 29)
• Web Server (web) • web-server • web-javascript • Flutter Tools
• Chrome (web) • chrome • web-javascript • Google Chrome 85.0.4183.121
! Doctor found issues in 2 categories.