Skip to content

Dialog closes when the user clicks in a text field that has a suffix icon with an onTap/onPressed method (Web only)  #150020

@nilsreichardt

Description

@nilsreichardt

Steps to reproduce

  1. Create a new Flutter project
  2. Copy the code sample
  3. Run the Flutter app using -d chrome flag
  4. Click the "Click Me" button
  5. Click on the text field

Expected results

The dialog should not close.

Actual results

The dialog closes

Code sample

Code sample
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Builder(builder: (context) {
            return ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) {
                    return AlertDialog(
                      content: TextField(
                        decoration: InputDecoration(
                          // Same issue with GestureDetector
                          suffixIcon: IconButton(
                            onPressed: () {},
                            icon: const Icon(Icons.person),
                          ),
                        ),
                      ),
                    );
                  },
                );
              },
              child: const Text('Click Me'),
            );
          }),
        ),
      ),
    ),
  );

  // This line is required to reproduce the bug
  WidgetsFlutterBinding.ensureInitialized().ensureSemantics();
}

Screenshots or Video

Screenshots / Video demonstration
Screen.Recording.2024-06-10.at.23.11.41.mov

Logs

Logs
Launching lib/main.dart on Chrome in debug mode...
This app is linked to the debug service: ws://127.0.0.1:60718/bbBceFGtYAk=/ws
Debug service listening on ws://127.0.0.1:60718/bbBceFGtYAk=/ws
Connecting to VM Service at ws://127.0.0.1:60718/bbBceFGtYAk=/ws

Flutter Doctor output

Doctor output
[✓] Flutter (Channel stable, 3.22.2, on macOS 14.3 23D56 darwin-arm64 (Rosetta), locale en-DE)
    • Flutter version 3.22.2 on channel stable at /Users/nils/fvm/versions/3.22.2
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 761747bfc5 (5 days ago), 2024-06-05 22:15:13 +0200
    • Engine revision edd8546116
    • Dart version 3.4.3
    • DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /Users/nils/Library/Android/sdk
    • Platform android-34, build-tools 33.0.1
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS (Xcode 15.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15F31d
    ! CocoaPods 1.12.1 out of date (1.13.0 is recommended).
        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 upgrade see https://guides.cocoapods.org/using/getting-started.html#updating-cocoapods for instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version unknown)
    • Android Studio at /Applications/Android Studio Preview.app/Contents
    • 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
    ✗ Unable to determine Android Studio version.
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2022.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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 17.0.6+0-17.0.6b829.9-10027231)

[✓] IntelliJ IDEA Community Edition (version 2023.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

[✓] IntelliJ IDEA Ultimate Edition (version 2022.2.3)
    • IntelliJ at /Users/nils/Library/Application Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/222.4345.14/IntelliJ
      IDEA.app
    • 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

[✓] VS Code (version 1.90.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.90.0

[✓] VS Code (version 1.82.0-insider)
    • VS Code at /Applications/Visual Studio Code - Insiders.app/Contents
    • Flutter extension version 3.70.0

[✓] Connected device (4 available)
    • Nils’s iPhone (mobile)          • 00008110-00042D6011D3801E • ios            • iOS 17.5.1 21F90
    • macOS (desktop)                 • macos                     • darwin-arm64   • macOS 14.3 23D56 darwin-arm64
      (Rosetta)
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad     • darwin         • macOS 14.3 23D56 darwin-arm64
      (Rosetta)
    • Chrome (web)                    • chrome                    • web-javascript • Google Chrome 125.0.6422.142

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

! Doctor found issues in 2 categories.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)found in release: 3.22Found to occur in 3.22found in release: 3.23Found to occur in 3.23has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions