Losing focus when keyboard pops up

[GrupoDO]

Hello! I have an issue using the InAppWebView when the keyboard pops up. The form on the website loaded via the plugin loses the focus and see a fast blink.

I attach a video. I'm using a Samsung Galaxy S10+ with Android 11.

How can I avoid the input lose its focus or how can the input gets its focus on keyboard pops up?

Thank you!

https://user-images.githubusercontent.com/53410779/118543530-5c492280-b722-11eb-97bd-b5c3058dd029.mp4

My app code is:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

void main() {
    runApp(Card());

}

class Card extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Card',
        home: StripeCreditCardScreen()
    );
  }
}

class StripeCreditCardScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final StripeCreditCardForm view = StripeCreditCardForm(token: 'ABC123');
        return SafeArea(child: view);
    }
}

class StripeCreditCardForm extends StatelessWidget {
    final GlobalKey webViewKey  = GlobalKey();
    String token;

    InAppWebViewController? inAppWebViewController;
    InAppWebView? view;

    StripeCreditCardForm({required this.token});

    void setInAppWebViewConfig() async{
        if (Platform.isAndroid) {
            await AndroidInAppWebViewController.setWebContentsDebuggingEnabled(true);
        }
    }

    void addCreditCard(){
        inAppWebViewController!.evaluateJavascript(source: """
                                                        window.dispatchEvent(event);
                                                    """);
    }

    Widget start(context) {
        setInAppWebViewConfig();
        String data = creditCardFormHTML.replaceAll(r'@@@primaryColor@@@', '0000FF');
        final view  = InAppWebView(
            key: webViewKey,
            initialData: InAppWebViewInitialData(data: data, baseUrl: Uri.parse('https://google.com')),
            initialOptions: InAppWebViewGroupOptions(
                crossPlatform: InAppWebViewOptions(
                    transparentBackground: false,
                    clearCache: true,
                    cacheEnabled: false,
                    allowFileAccessFromFileURLs: true,
                    disableHorizontalScroll: true,
                    disableVerticalScroll: true,
                ),
                android: AndroidInAppWebViewOptions(
                    useHybridComposition: true,
                    safeBrowsingEnabled: false,
                    needInitialFocus: true,
                ),
                ios: IOSInAppWebViewOptions(
                    allowsInlineMediaPlayback: true,
                )),
            androidOnPermissionRequest: (controller, origin, resources) async {
                return PermissionRequestResponse(
                    resources: resources,
                    action: PermissionRequestResponseAction.GRANT);
            },
            onWindowFocus: (controller) async{
                print('onWindowFocus');
            },
            onWebViewCreated: (controller) async{
            },
            onLoadStop: (controller, url) async {
                print('onLoadStop');
                controller.injectCSSFileFromAsset(assetFilePath: 'assets/checkout/stripe/stripe.css',);
                controller.evaluateJavascript(source: """
                                                        var stripeKey   = '"""+token+"""';
                                                    """).then((_){
                    //controller.injectJavascriptFileFromAsset(assetFilePath: 'assets/checkout/stripe/stripe.js',);
                });

                controller.addJavaScriptHandler(handlerName: 'getCreditCardToken', callback: (args) {
                    var response = args[0];
                    Navigator.of(context, rootNavigator: true).pop(response);
                });

                inAppWebViewController = controller;
            },
            onLoadError: (controller, url, code, message) {
            },
            onProgressChanged: (controller, progress) {

            },
            onConsoleMessage: (controller, consoleMessage) async{
                print(consoleMessage);
            },
        );

        return view;
    }

    @override
    Widget build(BuildContext context) {
        return start(context);
    }
}

const String creditCardFormHTML = '''
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Checkout</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

        <style>
            .payment-method.credit-card fieldset {
                border: 1px solid #@@@primaryColor@@@ !important;
                box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08), inset 0 1px 0 #@@@primaryColor@@@ !important;
            }
            .payment-method.credit-card input{
                font-size: 16px !important;
                color: #@@@primaryColor@@@ !important;
            }

            .payment-method.credit-card input::placeholder{
                color: #CDCDCD;
            }

            .payment-method.credit-card button {
                background-color: #@@@primaryColor@@@ !important;
                box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08), inset 0 1px 0 #@@@primaryColor@@@ !important;
            }

            .payment-method.credit-card button:active {
                background-color: #@@@primaryColor@@@ !important;
                box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08), inset 0 1px 0 #@@@primaryColor@@@ !important;
            }

            html, body, div.global{
                width: 100% !important;
                height: 300px !important;
            }
        </style>

        <script>
            var primaryColor    = '#@@@primaryColor@@@';
            console.log('loaded');
        </script>
    </head>
    <body>
        <div id="container" class="global">
            <main>
                <section class="container-lg">
                    <div class="cell payment-method credit-card">

                        <form>
                            <div data-locale-reversible>
                                <div class="row">
                                    <div class="field">
                                        <input id="credit-card-name" data-tid="elements_payment-methods.form.name_placeholder" class="input empty" type="text" placeholder="John Doe" required>
                                        <label for="credit-card-name" data-tid="elements_payment-methods.form.name_label">Titular de la tarjeta</label>
                                        <div class="baseline"></div>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>
                </section>
            </main>
        </div>

    </body>
</html>
''';

Flutter doctor:

flutter doctor -v
[√] Flutter (Channel stable, 2.0.2, on Microsoft Windows [Versión 10.0.19042.985], locale es-AR)
    • Flutter version 2.0.2 at F:\development\tools\frameworks\flutter
    • Framework revision 8962f6dc68 (10 weeks ago), 2021-03-11 13:22:20 -0800
    • Engine revision 5d8bf811b3
    • Dart version 2.12.1

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at F:\development\tools\sdk\android
    • Platform android-30, build-tools 30.0.2
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] Connected device (3 available)
    • SM G975F (mobile) • 192.168.0.4:5555 • android-arm64  • Android 11 (API 30)
    • Chrome (web)      • chrome           • web-javascript • Google Chrome 90.0.4430.93
    • Edge (web)        • edge             • web-javascript • Microsoft Edge 90.0.818.56

• No issues found!

[github-actions[bot]]

👋 @GrupoDO

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!

[kishan2612]

@GrupoDO yes this happening in Android 11

[siddastic]

any updates on this? facing same issue

[mozaa-vn]

same problem

[GeceGibi]

same here !

[github-actions[bot]]

This issue is stale and has been automatically closed because it has been open for more than 365 days with no activity. Please reopen a new issue if you still have it.