Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Focus Trap on Flutter Web #145885

Closed
niteshsh4rma opened this issue Mar 28, 2024 · 5 comments
Closed

Focus Trap on Flutter Web #145885

niteshsh4rma opened this issue Mar 28, 2024 · 5 comments
Labels
a: text input Entering text in a text field or keyboard related problems f: focus Focus traversal, gaining or losing focus found in release: 3.19 Found to occur in 3.19 found in release: 3.21 Found to occur in 3.21 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on platform-web Web applications specifically r: duplicate Issue is closed as a duplicate of an existing issue team-web Owned by Web platform team

Comments

@niteshsh4rma
Copy link
Contributor

Steps to reproduce

  1. Run code mentioned below.
  2. Tab through the app

Expected results

Focus system should leave flutter view after last focus and reach to browser buttons.

Actual results

Focus keep getting in cycle even though traversalEdgeBehaviour is LeaveFlutterView. When went to /second, it leaves view although which has a button to recieve focus, only difference between both screens is first have TextFields.

Code sample

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

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

final GoRouter _router = GoRouter(
  routes: <GoRoute>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) => HomePage(),
    ),
    GoRoute(
      path: '/second',
      builder: (BuildContext context, GoRouterState state) => SecondPage(),
    ),
  ],
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationProvider: _router.routeInformationProvider,
      routeInformationParser: _router.routeInformationParser,
      routerDelegate: _router.routerDelegate,
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              decoration: InputDecoration(
                hintText: 'Focus field 1',
              ),
            ),
            TextField(
              decoration: InputDecoration(
                hintText: 'Focus field 2',
              ),
            ),
            TextField(
              decoration: InputDecoration(
                hintText: 'Focus field 3 (last)',
              ),
            ),
            FilledButton(
                onPressed: () {
                  context.go('/second');
                },
                child: Text('go'))
          ],
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Second Page'),
        ),
        body: FilledButton(onPressed: () {}, child: Text('second page')));
  }
}

Screenshots or Video

Screenshots / Video demonstration
Screen.Recording.2024-03-28.at.3.21.32.PM.mov

Logs

Logs 
[Paste your logs here]

Flutter Doctor output

Doctor output 
[✓] Flutter (Channel master, 3.21.0-14.0.pre, on macOS 14.4 23E214 darwin-x64, locale en-IN)
    • Flutter version 3.21.0-14.0.pre on channel master at /Users/admin/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision a8345d5399 (2 days ago), 2024-03-25 21:07:30 -0400
    • Engine revision 3c881b75cc
    • Dart version 3.4.0 (build 3.4.0-268.0.dev)
    • DevTools version 2.34.0-dev.12

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/admin/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/admin/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.14.3

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

[✓] Android Studio (version 2023.2)
    • 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.9+0-17.0.9b1087.7-11185874)

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 14.4 23E214 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 123.0.6312.87

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

• No issues found!
@niteshsh4rma
Copy link
Contributor Author

Also, if I make /second subroute of /, then it also stops working.

Code change to test that.

final GoRouter _router = GoRouter(
  routes: <GoRoute>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) => HomePage(),
      routes: [
        GoRoute(
          path: 'second',
          builder: (BuildContext context, GoRouterState state) => SecondPage(),
        ),
      ],
    ),
  ],
);

@huycozy huycozy added the in triage Presently being triaged by the triage team label Mar 28, 2024
@huycozy
Copy link
Member

huycozy commented Mar 28, 2024

Thanks for the report. I also can see the issue. Even though I'm unsure if #145362 assembles this or not, I will keep this open for other's thoughts.

flutter doctor -v (stable and master) 
[✓] Flutter (Channel stable, 3.19.4, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.4 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 68bfaea224 (29 hours ago), 2024-03-20 15:36:31 -0700
    • Engine revision a5c24f538d
    • Dart version 3.3.2
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.2)
    • 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

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

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 123.0.6312.58

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

• No issues found!
[!] Flutter (Channel master, 3.21.0-16.0.pre.14, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.21.0-16.0.pre.14 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f5b65bad0f (2 hours ago), 2024-03-27 18:20:55 -0700
    • Engine revision c602abdbae
    • Dart version 3.4.0 (build 3.4.0-279.0.dev)
    • DevTools version 2.34.0-dev.12
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.2)
    • 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

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

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 123.0.6312.86

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

! Doctor found issues in 1 category.

@huycozy huycozy added a: text input Entering text in a text field or keyboard related problems framework flutter/packages/flutter repository. See also f: labels. platform-web Web applications specifically f: focus Focus traversal, gaining or losing focus has reproducible steps The issue has been confirmed reproducible and is ready to work on team-web Owned by Web platform team found in release: 3.19 Found to occur in 3.19 found in release: 3.21 Found to occur in 3.21 and removed in triage Presently being triaged by the triage team labels Mar 28, 2024
@niteshsh4rma
Copy link
Contributor Author

I guess it is more of router related instead of TextField because on /second page I can see the same behaviour with the update code, even though there is not any Textfields.

@yjbanov
Copy link
Contributor

yjbanov commented Apr 4, 2024

Deduplicating into #144235

@yjbanov yjbanov closed this as completed Apr 4, 2024
@huycozy huycozy added the r: duplicate Issue is closed as a duplicate of an existing issue label Apr 5, 2024
@github-actions GitHub Actions
Copy link

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Apr 19, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
a: text input Entering text in a text field or keyboard related problems f: focus Focus traversal, gaining or losing focus found in release: 3.19 Found to occur in 3.19 found in release: 3.21 Found to occur in 3.21 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on platform-web Web applications specifically r: duplicate Issue is closed as a duplicate of an existing issue team-web Owned by Web platform team
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@yjbanov @niteshsh4rma @huycozy