flutter / flutter/flutter

[web] Shift+Tab breaks when starting on browser navigation bar.

Open
#158,406 5 comments 0 reactions 0 assignees View on GitHub
found in release: 3.24 found in release: 3.27 framework has reproducible steps P2 platform-web team-web triaged-web
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

It seems that Flutter web doesn't traverse focus in the right order when it misses the "Shift" keydown event.

This happens when the user attempts to reverse focus from the UI elements of the browser, like the address bar, back into the Flutter app.

1. Run the sample code (below)
2. Focus the browser address bar
3. Press Shift+Tab until focus reaches flutter.

* **Expected:** Flutter should traverse focus in reverse order (FaB -> button -> ...)
* **Actual:** Flutter traverses focus in normal order (Button -> FaB -> ...)

Code: main.dart.js

This is just the default app with a button added to the center column. To make the effect even more noticeable, add more buttons :)

```dart
import 'package:flutter/widgets.dart';

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

import 'package:flutter/material.dart';

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

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});

final String title;

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

class _MyHomePageState extends State {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

void _resetCounter() {
setState(() {
_counter = 0;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
TextButton.icon(
onPressed: _resetCounter,
label: Text('Reset'),
icon: Icon(Icons.delete_rounded),
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.