Focus traversal into nested scrollable wrongly prevented #160431
Description
Steps to reproduce
-
Run example with
flutter run -d chrome -
Press tab to move focus to the topmost button
-
Move focus down with arrowDown key on your keyboard
Observe focus is moved down 1 row with each press, alternating between the fullwidth buttons and items in horizontal ListViews -
Scroll down so neither top or bottom is visible
-
Move focus up or down with keys
Observe focus skips over items in the horizontal ListViews
Expected results
Focus traversal behaves consistently when inside the same scrollable, no matter the scroll position
Actual results
Focus traversal only enters nested scrollables when at start or end of the outer scollable
Code sample
Code sample
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(debugShowCheckedModeBanner: false, home: Test());
}
}
class Test extends StatelessWidget {
const Test({super.key});
@override
Widget build(BuildContext context) {
return Shortcuts(
shortcuts: {
LogicalKeySet(LogicalKeyboardKey.arrowLeft):
const DirectionalFocusIntent(TraversalDirection.left),
LogicalKeySet(LogicalKeyboardKey.arrowRight):
const DirectionalFocusIntent(TraversalDirection.right),
LogicalKeySet(LogicalKeyboardKey.arrowUp):
const DirectionalFocusIntent(TraversalDirection.up),
LogicalKeySet(LogicalKeyboardKey.arrowDown):
const DirectionalFocusIntent(TraversalDirection.down),
},
child: Center(
child: ListView.builder(
scrollDirection: Axis.vertical,
itemCount: 30,
itemBuilder: (context, i) {
if (i % 2 == 0) {
return ElevatedButton(
onPressed: () {}, child: Text('Button $i'));
} else {
return SizedBox(
height: 100,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 15,
itemBuilder: (context, j) {
return ElevatedButton(
onPressed: () {}, child: Text('Button ${j}'));
},
));
}
})));
}
}
Screenshots or Video
Screenshots / Video demonstration
traversal.mp4
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
$ flutter doctor -v
[✓] Flutter (Channel stable, 3.27.1, on Microsoft Windows [Version 10.0.26100.2605], locale en-GB)
• Flutter version 3.27.1 on channel stable at C:\Baze\deps\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 17025dd882 (18 hours ago), 2024-12-17 03:23:09 +0900
• Engine revision cb4b5fff73
• Dart version 3.6.0
• DevTools version 2.40.2
[✓] Windows Version (Installed version of Windows is version 10 or higher)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at C:\Users\emilshes\AppData\Local\Android\sdk
• Platform android-34, build-tools 34.0.0
• Java binary at: C:/jdk-17\bin\java
• Java version OpenJDK Runtime Environment (build 17.0.2+8-86)
• 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 Community 2022 17.12.0)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
• Visual Studio Community 2022 version 17.12.35506.116
• Windows 10 SDK version 10.0.20348.0
✗ 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 2024.2)
• 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
• Java version OpenJDK Runtime Environment (build 21.0.3+-12282718-b509.11)
[✓] VS Code (version 1.95.3)
• VS Code at C:\Users\emilshes\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.102.0
[✓] Connected device (4 available)
• SML 5051W (mobile) • 10.40.14.111:5555 • android-arm • Android 9 (API 28)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.26100.2605]
• Chrome (web) • chrome • web-javascript • Google Chrome 131.0.6778.140
• Edge (web) • edge • web-javascript • Microsoft Edge 131.0.2903.99
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.