Skip to content

[Web]TextField is unusable within a dialog on few samsung devices #107786

@nitroplr

Description

@nitroplr

Steps to Reproduce

Every single TextField that is in an AlertDialog shown by showDialog or showGeneralDialog is broken on Chrome when used by mobile. The keyboard seems like it is tyring to pop up repeatedly. This does not happen with the exact same code on either Firefox or Brave. I ran into this problem first when I upgraded to Flutter 3.0.4. I was able to solve it by declaring my TextEditingControllers in my widget's state and passing them through the showGeneralDialog to my alertDialog method. After upgrading to Flutter 3.0.5 this no longer works, even by doing the same with the FocusNode for the alertDialog textfields as well. Also, on Flutter web in a mobile browser, the number keyboard does not pop up by default in either Chrome or Firefox like it does in Brave(on mobile) and on Android.

Also, many TextFields in a listview is buggy on Chrome and will randomly auto scroll back to the focused TextField in Chrome but not in other browsers on a mobile device.

I have two videos below that demonstrate what happens in the two browsers for mobile. I am using the add to home shortcut in both cases so it looks more like an Android app, however the same behavior happens if I use the browser I used to create the shortcut instead.

On Chrome for Mobile:

Screen_Recording_20220716-135728_Chrome.mp4

On Brave for Mobile:

Screen_Recording_20220716-135837_Brave.mp4

Unfortunately this is difficult to reproduce since it is happening on web browsers for mobile, however when I launch a web browser on my Android emulator and navigate to my site from my Android app, every time I focus a TextField, whether it is in a showDialog or just on a normal page, I get this error:

I/chromium(24552): [INFO:CONSOLE(36057)] "Uncaught TypeError: Cannot read property 'toString' of null", source: https://mywebsite.app/main.dart.js (36057)

Any help would be great!

Code for the TextField that bugs out in Chrome but works fine on Brave and Firefox:

   Widget _setOwnDKPDialog(
      {required BuildContext context,
      required TextEditingController controller,
      required FocusNode focusNode}) {
    bool setOwnDKPTipVisible = false;
    return AlertDialog(
      scrollable: true,
      content: StatefulBuilder(builder: (BuildContext context, StateSetter setState) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
              child: TextField(
                style: Theme.of(context).textTheme.bodyText2,
                keyboardType: TextInputType.number,
                inputFormatters: <TextInputFormatter>[FilteringTextInputFormatter.digitsOnly],
                decoration: InputDecoration(
                  labelText: 'New DKP Value',
                ),
                controller: controller,
                focusNode: focusNode,
              ),
            ),
            AnimatedCrossFade(
              duration: Duration(milliseconds: 500),
              secondChild: SizedBox(),
              firstChild: Padding(
                padding: const EdgeInsets.fromLTRB(0, 0, 0, 10),
                child: Text(
                  'Set your own DKP value to set a limit on what your auto bidders can spend.',
                  style: Theme.of(context).textTheme.bodyText2,
                ),
              ),
              crossFadeState: setOwnDKPTipVisible ? CrossFadeState.showFirst : CrossFadeState.showSecond,
              firstCurve: Curves.easeIn,
              secondCurve: Curves.easeOut,
              sizeCurve: Curves.fastOutSlowIn,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                IconButton(
                    splashRadius: 20,
                    highlightColor: Colors.blue[100],
                    splashColor: Colors.blue[200],
                    hoverColor: Colors.blue[100],
                    onPressed: () {
                      setState(() {
                        setOwnDKPTipVisible ? setOwnDKPTipVisible = false : setOwnDKPTipVisible = true;
                      });
                    },
                    icon: Icon(CupertinoIcons.question)),
                ElevatedButton(
                  child: Text('Submit'),
                  onPressed: () async {
                    if (controller.text.length > 0) {
                      int newDKPValue = int.parse(controller.text);
                      int adjustmentValue = newDKPValue - memberDKP.dkpStats.dkp.toInt();
                      Raid currentRaid = await RaidDB().getMostRecentRaid(guild.name);
                      DKPDB().addManualAdjustment(
                          manualAdjustment: ManualAdjustment(
                              userIDOfAdjusted: FirebaseAuth.instance.currentUser!.uid,
                              userIDOfAdjuster: FirebaseAuth.instance.currentUser!.uid,
                              userNameOfAdjuster: this.thisMember.guildUserName,
                              adjustmentDescription: 'Self DKP Total Set',
                              adjustmentCreated: DateTime.now().millisecondsSinceEpoch,
                              adjustmentValue: adjustmentValue,
                              raidDocCreated: currentRaid.raidDocCreated),
                          guild: guild);
                      Navigator.of(context).pop();
                    } else {
                      Navigator.of(context).pop();
                    }
                  },
                )
              ],
            ),
          ],
        );
      }),
    );
  }
[√] Flutter (Channel stable, 3.0.5, on Microsoft Windows [Version 10.0.19044.1826], locale en-US)
    • Flutter version 3.0.5 at C:\Users\nitro\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (3 days ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0-rc3)
    • Android SDK at C:\Users\nitro\AppData\Local\Android\Sdk
    • Platform android-31, build-tools 31.0.0-rc3
    • ANDROID_HOME = C:\Users\nitro\AppData\Local\Android\Sdk
    • Java binary at: C:\Users\nitro\AppData\Local\JetBrains\Toolbox\apps\AndroidStudio\ch-0\212.5712.43.2112.8512546\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
    • All Android licenses accepted.
                                                                                                                                  
[√] Chrome - develop for the web                                                                                                  
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[!] Visual Studio - develop for Windows (Visual Studio Build Tools 2017 15.9.36)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools
    • Visual Studio Build Tools 2017 version 15.9.28307.1525
    • Windows 10 SDK version 10.0.17763.0
    X Visual Studio 2019 or later is required.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[√] IntelliJ IDEA Ultimate Edition (version 2022.1)
    • IntelliJ at C:\Users\nitro\AppData\Local\JetBrains\Toolbox\apps\IDEA-U\ch-0\221.5921.22
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin version 221.5787.37

[√] Connected device (4 available)
    • sdk gphone x86 (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • Windows (desktop)       • windows       • windows-x64    • Microsoft Windows [Version 10.0.19044.1826]
    • Chrome (web)            • chrome        • web-javascript • Google Chrome 103.0.5060.114
    • Edge (web)              • edge          • web-javascript • Microsoft Edge 102.0.1245.44

[√] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

Flutter 3.0.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f1875d5 (3 days ago) • 2022-07-13 11:24:16 -0700
Engine • revision e85ea0e79c
Tools • Dart 2.17.6 • DevTools 2.12.2

Flutter channels:
master
beta

  • stable

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: qualityA truly polished experiencea: text inputEntering text in a text field or keyboard related problemse: device-specificOnly manifests on certain devicese: samsungIssues only reproducible on Samsung devicesengineflutter/engine related. See also e: labels.platform-androidAndroid applications specificallyplatform-webWeb applications specifically

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions