[Web] - Broken TextField in Semantics mode when given an InputDecorator with errorText on mobile browsers

Steps to reproduce

Run a web app in semantics mode and render a TextField with an InputDecorator that has errorText
Attempt to click into TextField

Expected results

Mobile keyboard pops up, allows us to type.

Actual results

Mobile keyboard doesn't pop up.

Code sample

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(const App());

  SemanticsBinding.instance.ensureSemantics();
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: TextDecorationExample(),
    );
  }
}

class TextDecorationExample extends StatelessWidget {
  const TextDecorationExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Column(
        children: [
          TextField(
            decoration: InputDecoration(
              errorText: 'error',
            ),
          ),
        ],
      ),
    );
  }
}

Flutter Doctor output

Doctor output

[✓] Flutter (Channel master, 3.19.0-6.0.pre, on macOS 14.2.1 23C71
    darwin-arm64, locale en-US)

This isn't only a mobile Browser problem.
All my examples from #129324 are for normal Web Chrome without mobile view enabled.

This isn't only a mobile Browser problem. All my examples from #129324 are for normal Web Chrome without mobile view enabled.

I'm unable to reproduce the issue on Desktop chrome. The issue that I'm seeing occurs on mobile only - can you send a screen recording of the issues you're seeing on Desktop chrome?

@htoor3

Yes @htoor3 same issue i am facing on native browser when i enable accessibility with below code and run on native browser and without input decoration all the fields are working fine.

RendererBinding.instance.ensureSemantics();

@desmond206x

@desmond206x did you find any solution for this issue?

I didn't found a solution. We disabled the semantics for all of our products...

My first tests were Flutter_Quill related. I used the flutter master branch. All in flutter web. No mobile browser.

No input possible in both editors, even after focus change.

Code Example 1

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_quill/flutter_quill.dart';

void main() {
  runApp(const MyApp());

  SemanticsBinding.instance.ensureSemantics();
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  QuillController quillController1 = QuillController.basic();
  ScrollController scrollController1 = ScrollController();

  QuillController quillController2 = QuillController.basic();
  ScrollController scrollController2 = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        QuillEditor(
          configurations: QuillEditorConfigurations(
            controller: quillController1,
            placeholder: 'editor 1',
            padding: const EdgeInsets.all(8),
            scrollable: false,
            autoFocus: false,
            readOnly: false,
            expands: false,
          ),
          focusNode: FocusNode(),
          scrollController: scrollController1,
        ),
        QuillEditor(
          configurations: QuillEditorConfigurations(
            controller: quillController2,
            placeholder: 'editor 2',
            padding: const EdgeInsets.all(8),
            scrollable: false,
            autoFocus: false,
            readOnly: false,
            expands: false,
          ),
          focusNode: FocusNode(),
          scrollController: scrollController2,
        ),
      ],
    );
  }
}

First input not possible. Only after the first focus change the input is enabled and everything works as expected.

Code Example 2

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_quill/flutter_quill.dart';

void main() {
  runApp(const MyApp());

  SemanticsBinding.instance.ensureSemantics();
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  QuillController quillController1 = QuillController.basic();
  ScrollController scrollController1 = ScrollController();

  QuillController quillController2 = QuillController.basic();
  ScrollController scrollController2 = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        MergeSemantics(
          child: Semantics(
            textField: true,
            focusable: true,
            multiline: true,
            obscured: false,
            child: QuillEditor(
              configurations: QuillEditorConfigurations(
                controller: quillController1,
                placeholder: 'editor 1',
                padding: const EdgeInsets.all(8),
                scrollable: false,
                autoFocus: false,
                readOnly: false,
                expands: false,
              ),
              focusNode: FocusNode(),
              scrollController: scrollController1,
            ),
          ),
        ),
        MergeSemantics(
          child: Semantics(
            textField: true,
            focusable: true,
            multiline: true,
            obscured: false,
            child: QuillEditor(
              configurations: QuillEditorConfigurations(
                controller: quillController2,
                placeholder: 'editor 2',
                padding: const EdgeInsets.all(8),
                scrollable: false,
                autoFocus: false,
                readOnly: false,
                expands: false,
              ),
              focusNode: FocusNode(),
              scrollController: scrollController2,
            ),
          ),
        ),
      ],
    );
  }
}

Flutter doctor

C:\flutter\master>bin\flutter doctor -v
[!] Flutter (Channel master, 3.20.0-1.0.pre.21, on Microsoft Windows [Version 10.0.22631.3007], locale de-DE)
• Flutter version 3.20.0-1.0.pre.21 on channel master at C:\flutter\master
! The flutter binary is not on your path. Consider adding C:\flutter\master\bin to your path.
! The dart binary is not on your path. Consider adding C:\flutter\master\bin to your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 0b5cd50 (4 hours ago), 2024-02-05 06:16:23 +0100
• Engine revision f34c658
• Dart version 3.4.0 (build 3.4.0-99.0.dev)
• DevTools version 2.31.0
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly
to perform update checks and upgrades.

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
• Android SDK at C:\Users\user\AppData\Local\Android\Sdk
• Platform android-33, build-tools 33.0.1
• Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)
• All Android licenses accepted.

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

[!] Visual Studio - develop Windows apps (Visual Studio Professional 2022 17.8.2)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Professional
• Visual Studio Professional 2022 version 17.8.34322.80
• Windows 10 SDK version 10.0.19041.0
X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop
development with C++" workload, and include these components:
MSVC v142 - VS 2019 C++ x64/x86 build tools
- If there are multiple build tool versions available, install the latest
C++ CMake tools for Windows
Windows 10 SDK

[√] Android Studio (version 2022.3)
• 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
• android-studio-dir = C:\Program Files\Android\Android Studio
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)

[√] VS Code, 64-bit edition (version 1.86.0)
• VS Code at C:\Program Files\Microsoft VS Code
• Flutter extension version 3.82.0

[√] Connected device (3 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22631.3007]
• Chrome (web) • chrome • web-javascript • Google Chrome 121.0.6167.86
• Edge (web) • edge • web-javascript • Microsoft Edge 121.0.2277.98

[√] Network resources
• All expected network resources are available.

! Doctor found issues in 2 categories.

flutter_quill: 9.2.11

I will now try to strip down the examples to pure flutter without quill.

Okay, that was easy. My code example from here #129324 (comment) is still valid and the input doesn't work on first focus.

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(const App());

  SemanticsBinding.instance.ensureSemantics();
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: TextDecorationExample(),
    );
  }
}

class TextDecorationExample extends StatelessWidget {
  const TextDecorationExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Column(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          TextField(
            decoration: InputDecoration(
              errorText: 'error',
              hintText: 'hint',
              suffixIcon: Icon(Icons.abc),
            ),
            autofocus: true,
          ),
        ],
      ),
    );
  }
}

@desmond206x

@desmond206x Thank you for reply Also i can't disable semantics on iPad browser because iPad device type is returning "macOS"
https://forums.developer.apple.com/forums/thread/118298

@htoor3

Hi @htoor3 Any update on this issue?

After adding semantics mode we've had many customer complaints and I've spent two days adding/removing chunks of code to identify where this issue was coming from.

Customers were unable to enter text into textfields because the mobile keyboard wouldn't pop up. Except sometimes it did for the first Textfield and then when you moved to the next TextField the keyboard would close.

Is there a way to warn other Flutter developers not to use semantics mode while this bug is open as it is so hard to diagnose and can cause so many issues?

This issue is still reproducible in 3.19.6 flutter SDK.

This issue is also causing the semantics reader to skip over the TextField when talkback/voiceover is enabled.

@mdebbar

Does this work for android chrome as well ? I am having issues inputting text @mdebbar

Flexible( flex: 2, child: FormBuilderTextField( key: const ValueKey('email_input'), name: 'email', decoration: const InputDecoration( label: Text('Email'), contentPadding: EdgeInsets.fromLTRB(15, 15, 15, 15), border: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(5)), ), ), ), ),

[web] Fix keyboard not showing up when iOS input has decoration text (f…

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

[web] Fix keyboard not showing up when iOS input has decoration text (f…

Navigation Menu

Repository navigation

[Web] - Broken TextField in Semantics mode when given an `InputDecorator` with `errorText` on mobile browsers #141975

Steps to reproduce

Expected results

Actual results

Code sample

Flutter Doctor output

11 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Web] - Broken TextField in Semantics mode when given an InputDecorator with errorText on mobile browsers #141975

Description

Steps to reproduce

Expected results

Actual results

Code sample

Flutter Doctor output

Activity

desmond206x commented on Jan 22, 2024

htoor3 commented on Jan 22, 2024

msutharworkspace commented on Jan 25, 2024

msutharworkspace commented on Jan 30, 2024

desmond206x commented on Feb 5, 2024

desmond206x commented on Feb 5, 2024

msutharworkspace commented on Feb 5, 2024

msutharworkspace commented on Feb 15, 2024

11 remaining items

tom-bailey-om commented on Jun 10, 2024

msutharworkspace commented on Jun 13, 2024

fryeap commented on Jul 31, 2024

jay-athelas commented on Sep 18, 2024

github-actions commented on Oct 8, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

[Web] - Broken TextField in Semantics mode when given an `InputDecorator` with `errorText` on mobile browsers #141975