[web] Shift+Tab breaks when starting on browser navigation bar.
- 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
Assessment
This issue has not been assessed yet.