Fix directional focus in nested scrollables with different axis #172875

romaingyh · 2025-07-28T19:22:51Z

Related issue : #172854
Fixes #160431

This PR fixes the focus when navigating with keyboard arrows or TV remote d-pad in a nested lists with different axis and a fixed focusable at the top.
It's a common setup for apps that deal with images or videos.

The problem is that when the vertical scrollbar has scrolled and you want to scroll back to the top without the mouse, only using keyboard up arrow to jump from widgets to widgets in the list until reaching the top, the fixed top focusable widget wrongly takes the focus instead of letting the vertical scrollable scroll.

I think the video bellow explain the problem better.

Before this PR	After this PR
https://github.com/user-attachments/assets/54160e0c-abe5-4181-9aea-8351ce5f35b5	https://github.com/user-attachments/assets/eee32175-37eb-44a6-a7c2-a751fc82d592

Note that I had to edit two existing tests because they were failing with my edits. However, I think these tests were testing a bad behavior.

For example here is the visualization of the Focus traversal inside a vertical scrollable scrolls to stay visible test case before this PR :

broken_test_before.mov

Test was green bug the focus behavior is weird. When pressing arrow down from item 3 we would expect a scroll and item 4 to be focused, here it's footer that is focused and when we press arrow down again item 5 is focused and item 4 is skipped.

Here is the behavior after this PR and the test edited :

broken_test_after.mov

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

Piinks · 2025-07-29T22:15:47Z

Hey @romaingyh it looks like we might have duplicate PRs/Issues here.
Can you see if #172283 and #160431 are the same PR/Issue?

Piinks · 2025-07-29T22:17:22Z

packages/flutter/test/widgets/focus_traversal_test.dart


        // Go down until we hit the bottom of the visible area.
-        for (int i = 1; i <= 4; ++i) {
+        for (int i = 1; i <= 3; ++i) {


Can you share why these tests change?

These tests were ok before the PR but they were actually testing a bad behavior. I shared an explaination and two video before/after in the PR description

romaingyh · 2025-07-30T08:25:44Z

Hey @romaingyh it looks like we might have duplicate PRs/Issues here. Can you see if #172283 and #160431 are the same PR/Issue?

Hello @Piinks, you're right they are totally duplicate, sorry for not catching it before. I don't know which PR do you want to keep, I think this one has better tests and is more complete because without removing !focusedScrollable.position.atEdge the bug is not fully fixed.

Andro999b · 2025-08-02T11:32:29Z

@romaingyh @Piinks I think we should prioritize this MR. I also don't have a time to work in my MR for the next couple weeks.

Piinks · 2025-08-04T15:59:33Z

packages/flutter/test/widgets/focus_traversal_test.dart

+        await tester.pump();
+        expect(stickyButtonNode.hasPrimaryFocus, isTrue);
+      },
+      skip: isBrowser,


Why do these skip on browser? The analyzer failure is due to these not being attributed with comments s to why they are being skipped. See other skips for an example.

I copy/pasted the test above which is a bit similar as a base for my test the one above is skipped on browser because of this #35347

Should I add the same comment ? How can I see If this issue break the new test ?

Web tests run in CI here in the PR, if they are affected they should fail without the skip. Otherwise, there has to be a comment there pointing to the reason why the test is skipped, like the others. :)
This should resolve the analyzer failure here.

Piinks

Closed the other PR per the last comment.
@romaingyh can you confirm if this actually does resolve #160431 as well since we identified it as a potential dupe?

romaingyh · 2025-08-04T19:26:29Z

@Piinks I confirm #160431 is not reproducible with this PR

Enregistrement.de.l.ecran.2025-08-04.a.21.27.55.mov

Piinks · 2025-08-07T16:00:42Z

I confirm #160431 is not reproducible with this PR

Thanks! Is it covered by a test here?

romaingyh · 2025-08-12T15:12:47Z

I confirm #160431 is not reproducible with this PR

Thanks! Is it covered by a test here?

Yes I think it's covered with the same test as my issue "Focus traversal with horizontal scrollables inside a vertical scrollable handles vertical navigation correctly"

…when finding next focus. Fixes flutter#172854

…sted horizontal and vertical scrollables

Piinks

LGTM thank you!

justinmc

LGTM, thank you for fixing this!

packages/flutter/test/widgets/focus_traversal_test.dart

auto-submit · 2025-08-12T17:03:57Z

autosubmit label was removed for flutter/flutter/172875, because - The status or check suite Linux web_skwasm_tests_1 has failed. Please fix the issues identified (or deflake) before re-applying this label.

romaingyh · 2025-08-12T21:10:09Z

CI linux web_canvaskit_tests_0 and linux web_skwasm_tests_1 are failing on my two new tests. Looking at stdout it seems we're facing #35347 like the other keyboard focus related tests.

I think it's reasonable to do the same thing on these two tests : skip on web and add a comment referencing the issue

…r due to issue flutter#35347

…axis (flutter/flutter#172875)

Roll Flutter from e2a347b14a18 to 34c2a3b158b2 (41 revisions) flutter/flutter@e2a347b...34c2a3b 2025-08-13 bkonyi@google.com [ Tool ] Mark Linux_pixel_7pro linux_chrome_dev_mode as bringup (flutter/flutter#173646) 2025-08-13 bkonyi@google.com [ Widget Preview ] Move `--dtd-url` from a global flag to a `widget-preview start` option (flutter/flutter#173712) 2025-08-13 jssaadeh@outlook.com Null aware elements clean-ups (flutter/flutter#173074) 2025-08-13 engine-flutter-autoroll@skia.org Roll Skia from 29e3e1ab7f62 to f7fdda3cd0e6 (3 revisions) (flutter/flutter#173709) 2025-08-13 matt.kosarek@canonical.com Regular windows win32 engine (flutter/flutter#173424) 2025-08-13 engine-flutter-autoroll@skia.org Roll Dart SDK from a098cb676fd6 to 73153bdc1459 (1 revision) (flutter/flutter#173708) 2025-08-13 engine-flutter-autoroll@skia.org Roll Fuchsia Linux SDK from vgv-rTf7i9PfcDq2Y... to I1TfNmsqTp7t3rO8e... (flutter/flutter#173690) 2025-08-13 engine-flutter-autoroll@skia.org Roll Skia from 1170405c30cf to 29e3e1ab7f62 (2 revisions) (flutter/flutter#173689) 2025-08-13 engine-flutter-autoroll@skia.org Roll Dart SDK from e2b7aec7333e to a098cb676fd6 (4 revisions) (flutter/flutter#173683) 2025-08-13 engine-flutter-autoroll@skia.org Roll Skia from d06fdf03c6a1 to 1170405c30cf (4 revisions) (flutter/flutter#173681) 2025-08-13 engine-flutter-autoroll@skia.org Roll Skia from 9ed4b4e53db2 to d06fdf03c6a1 (11 revisions) (flutter/flutter#173661) 2025-08-12 robert.ancell@canonical.com Fix GTK redraw call being called from non-GTK thread. (flutter/flutter#173602) 2025-08-12 jason-simmons@users.noreply.github.com [Impeller] Apply Y coordinate scaling when sampling from the destination texture in framebuffer advanced blends (flutter/flutter#173639) 2025-08-12 11901536+romaingyh@users.noreply.github.com Fix directional focus in nested scrollables with different axis (flutter/flutter#172875) 2025-08-12 41930132+hellohuanlin@users.noreply.github.com [ios][tools]do not log "bonjour not found" at all (unless verbose) (flutter/flutter#173569) 2025-08-12 1063596+reidbaker@users.noreply.github.com Remove jetifier usages (flutter/flutter#173548) 2025-08-12 bkonyi@google.com [ Tool ] Fix run_linux_chrome_dev_mode (flutter/flutter#173647) 2025-08-12 41930132+hellohuanlin@users.noreply.github.com [ios] Update iOS code signing CIPD instruction command (flutter/flutter#171173) 2025-08-12 bkonyi@google.com Reapply "Make device debuggable if useDwdsWebSocketConnection is true … (#173551)" (flutter/flutter#173628) 2025-08-12 jason-simmons@users.noreply.github.com Roll Clang to 8c7a2ce01a77c96028fe2c8566f65c45ad9408d3 (flutter/flutter#173429) 2025-08-12 mdebbar@google.com [web] Fallback to CanvasKit when WebGL is not available (flutter/flutter#173629) 2025-08-12 engine-flutter-autoroll@skia.org Roll Packages from a114ac2 to 08a9b2c (3 revisions) (flutter/flutter#173625) 2025-08-12 bkonyi@google.com [ Tool ] Fix crash from possible DDS startup race (flutter/flutter#173362) 2025-08-12 engine-flutter-autoroll@skia.org Roll Skia from a2936eff2179 to 9ed4b4e53db2 (3 revisions) (flutter/flutter#173611) 2025-08-12 49699333+dependabot[bot]@users.noreply.github.com Bump actions/checkout from 4 to 5 in the all-github-actions group (flutter/flutter#173606) 2025-08-12 engine-flutter-autoroll@skia.org Roll Dart SDK from c5fe48aee60d to e2b7aec7333e (1 revision) (flutter/flutter#173604) 2025-08-12 engine-flutter-autoroll@skia.org Roll Skia from 44bb9d908ee4 to a2936eff2179 (21 revisions) (flutter/flutter#173603) 2025-08-12 ybz975218925@gmail.com Fix the issue of over-scrolling in SliverMainAxisGroup with a PinnedHeaderSliver. (flutter/flutter#173349) 2025-08-12 engine-flutter-autoroll@skia.org Roll Dart SDK from b2a23936f968 to c5fe48aee60d (2 revisions) (flutter/flutter#173596) 2025-08-11 fmalita@gmail.com Update CanRenderTiledTexture unit tests (flutter/flutter#173553) 2025-08-11 15619084+vashworth@users.noreply.github.com Update integration test for iOS deployment workflows (flutter/flutter#173566) 2025-08-11 30870216+gaaclarke@users.noreply.github.com Enables vulkan for PowerVR B-Series (flutter/flutter#173561) 2025-08-11 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Reapply "Make device debuggable if useDwdsWebSocketConnection is true … (#173551)" (#173568)" (flutter/flutter#173587) 2025-08-11 engine-flutter-autoroll@skia.org Roll Dart SDK from 8e882349fcab to b2a23936f968 (2 revisions) (flutter/flutter#173571) 2025-08-11 bkonyi@google.com Reapply "Make device debuggable if useDwdsWebSocketConnection is true … (#173551)" (flutter/flutter#173568) 2025-08-11 15619084+vashworth@users.noreply.github.com Update CI iOS tests (flutter/flutter#173563) 2025-08-11 engine-flutter-autoroll@skia.org Roll Packages from 34948d1 to a114ac2 (4 revisions) (flutter/flutter#173556) 2025-08-11 engine-flutter-autoroll@skia.org Roll Fuchsia Linux SDK from HclTm0V8hgSpfqmtG... to vgv-rTf7i9PfcDq2Y... (flutter/flutter#173505) 2025-08-11 engine-flutter-autoroll@skia.org Roll Dart SDK from 6a7ae1ffd1c9 to 8e882349fcab (2 revisions) (flutter/flutter#173499) 2025-08-11 32538273+ValentinVignal@users.noreply.github.com Update `ExpansibleController` in `ExpansionTile` `didUpdateWidget` (flutter/flutter#173175) 2025-08-11 41930132+hellohuanlin@users.noreply.github.com add format cmd to tools instruction (flutter/flutter#173428) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC louisehsu@google.com,stuartmorgan@google.com on the revert to ensure that a human ...

…ter#172875)  Related issue : flutter#172854 Fixes flutter#160431 This PR fixes the focus when navigating with keyboard arrows or TV remote d-pad in a nested lists with different axis and a fixed focusable at the top. It's a common setup for apps that deal with images or videos. The problem is that when the vertical scrollbar has scrolled and you want to scroll back to the top without the mouse, only using keyboard up arrow to jump from widgets to widgets in the list until reaching the top, the fixed top focusable widget wrongly takes the focus instead of letting the vertical scrollable scroll. I think the video bellow explain the problem better. | Before this PR | After this PR | |--------|--------| | https://github.com/user-attachments/assets/54160e0c-abe5-4181-9aea-8351ce5f35b5 | https://github.com/user-attachments/assets/eee32175-37eb-44a6-a7c2-a751fc82d592 | Note that I had to edit two existing tests because they were failing with my edits. However, I think these tests were testing a bad behavior. For example here is the visualization of the `Focus traversal inside a vertical scrollable scrolls to stay visible` test case before this PR : https://github.com/user-attachments/assets/be843ae8-a0df-411e-971c-3bf763c457e0 Test was green bug the focus behavior is weird. When pressing arrow down from item 3 we would expect a scroll and item 4 to be focused, here it's footer that is focused and when we press arrow down again item 5 is focused and item 4 is skipped. Here is the behavior after this PR and the test edited : https://github.com/user-attachments/assets/b90757a8-042d-4d53-b7e6-19b9141cc83f ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [ ] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing.  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

…axis (flutter/flutter#172875)

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: focus Focus traversal, gaining or losing focus labels Jul 28, 2025

romaingyh changed the title ~~Nested list focus~~ Fix directional focus in nested scrollables with different axis Jul 28, 2025

Piinks reviewed Jul 29, 2025

View reviewed changes

Piinks mentioned this pull request Jul 29, 2025

fix: focus traversal into nested scrollable #172283

Closed

Piinks reviewed Aug 4, 2025

View reviewed changes

romaingyh added 3 commits August 12, 2025 17:13

fix: DirectionalFocusTraversalPolicyMixin considers scrollables axis …

d421f60

…when finding next focus. Fixes flutter#172854

Add tests to verify correct focus behavior when navigating through ne…

d2cf298

…sted horizontal and vertical scrollables

refactor: Remove test skip on browser

c5bfae5

romaingyh force-pushed the nested_list_focus branch from a50173e to c5bfae5 Compare August 12, 2025 15:14

Piinks approved these changes Aug 12, 2025

View reviewed changes

justinmc approved these changes Aug 12, 2025

View reviewed changes

packages/flutter/test/widgets/focus_traversal_test.dart Outdated Show resolved Hide resolved

chore: Add missing periods to comments

fe86f7b

Piinks added the autosubmit Merge PR when tree becomes green via auto submit App label Aug 12, 2025

auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Aug 12, 2025

test: Skip focus traversal navigation in nested lists tests on browse…

378d82d

…r due to issue flutter#35347

justinmc added the autosubmit Merge PR when tree becomes green via auto submit App label Aug 12, 2025

auto-submit bot added this pull request to the merge queue Aug 12, 2025

Merged via the queue into flutter:master with commit b46a6aa Aug 12, 2025
74 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Aug 12, 2025

engine-flutter-autoroll mentioned this pull request Aug 13, 2025

Roll Flutter from e2a347b14a18 to 6a89f1e75367 (35 revisions) flutter/packages#9797

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 13, 2025

b46a6aa9a Fix directional focus in nested scrollables with different …

c0218ea

…axis (flutter/flutter#172875)

engine-flutter-autoroll mentioned this pull request Aug 13, 2025

Roll Flutter from e2a347b14a18 to 9cbd55ceb8ab (36 revisions) flutter/packages#9798

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 13, 2025

b46a6aa9a Fix directional focus in nested scrollables with different …

0239e6e

…axis (flutter/flutter#172875)

engine-flutter-autoroll mentioned this pull request Aug 13, 2025

Roll Flutter from e2a347b14a18 to 738ec1a4b940 (37 revisions) flutter/packages#9799

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 13, 2025

b46a6aa9a Fix directional focus in nested scrollables with different …

5877d6d

…axis (flutter/flutter#172875)

engine-flutter-autoroll mentioned this pull request Aug 13, 2025

Roll Flutter from e2a347b14a18 to f26eddba0053 (39 revisions) flutter/packages#9801

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 13, 2025

b46a6aa9a Fix directional focus in nested scrollables with different …

28a0a7a

…axis (flutter/flutter#172875)

engine-flutter-autoroll mentioned this pull request Aug 13, 2025

Roll Flutter from e2a347b14a18 to 1eb2f68da5a7 (40 revisions) flutter/packages#9802

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 13, 2025

b46a6aa9a Fix directional focus in nested scrollables with different …

d56b3a0

…axis (flutter/flutter#172875)

engine-flutter-autoroll mentioned this pull request Aug 13, 2025

Roll Flutter from e2a347b14a18 to 34c2a3b158b2 (41 revisions) flutter/packages#9803

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 13, 2025

b46a6aa9a Fix directional focus in nested scrollables with different …

019b39c

…axis (flutter/flutter#172875)

Piinks mentioned this pull request Aug 15, 2025

Flutter Notable Commits - 2025 #161460

Open

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 12, 2025

b46a6aa9a Fix directional focus in nested scrollables with different …

9b939df

…axis (flutter/flutter#172875)

Fix directional focus in nested scrollables with different axis #172875

Fix directional focus in nested scrollables with different axis #172875

Uh oh!

Conversation

romaingyh commented Jul 28, 2025 • edited by Piinks Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

Piinks commented Jul 29, 2025

Uh oh!

Piinks Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

romaingyh Jul 30, 2025

Choose a reason for hiding this comment

Uh oh!

romaingyh commented Jul 30, 2025

Uh oh!

Andro999b commented Aug 2, 2025

Uh oh!

Piinks Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

romaingyh Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

Piinks Aug 7, 2025

Choose a reason for hiding this comment

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

romaingyh commented Aug 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Piinks commented Aug 7, 2025

Uh oh!

romaingyh commented Aug 12, 2025

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

auto-submit bot commented Aug 12, 2025

Uh oh!

romaingyh commented Aug 12, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

romaingyh commented Jul 28, 2025 •

edited by Piinks

Loading

romaingyh commented Aug 4, 2025 •

edited

Loading