Skip to content

Add alternative input method for RangeSlider in NavigationMode.directional - #187816

Closed
mbcorona wants to merge 3 commits into
flutter:masterfrom
mbcorona:fix/range-slider-directional-nav
Closed

mbcorona wants to merge 3 commits into
flutter:masterfrom
mbcorona:fix/range-slider-directional-nav

Conversation

@mbcorona

@mbcorona mbcorona commented Jun 10, 2026 •

Copy link
Copy Markdown
Member

This PR implements the alternative input method for RangeSlider in NavigationMode.directional that was discussed in #181968, following the UX pattern @chunhtai and the Material team suggested there: in directional mode the arrow keys only move focus, pressing Enter on a focused thumb enters a value-adjustment mode where Left/Right adjust the value, and pressing Enter again (or losing focus) exits it. Traditional navigation is unchanged. I've added a dedicated test group covering each of these cases.

Dependency / sequencing note: This builds directly on top of the keyboard support added in #181525, which is currently a draft held behind the Material/Cupertino code freeze (#184093). Because that work isn't in master yet, I'd appreciate guidance on how you'd like to sequence this — e.g. rebasing this onto #181525's branch as a stacked PR, or holding it until #181525 (or its post-decoupling port) lands. Happy to adjust the base or re-target to the new package once the decoupling path is settled.

Fixes #181968

If you had to change anything in the flutter/tests repo, include a link to the migration guide as per the breaking change policy.

Pre-launch Checklist

If you need help, consider asking for advice on the #hackers-new channel on Discord.

If this change needs to override an active code freeze, provide a comment explaining why. The code freeze workflow can be overridden by code reviewers. See pinned issues for any active code freezes with guidance.

Note: The Flutter team is currently trialing the use of Gemini Code Assist for GitHub. Comments from the gemini-code-assist bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.

@flutter-dashboard flutter-dashboard Bot added the CICD Run CI/CD label Jun 10, 2026
@github-actions github-actions Bot added framework flutter/packages/flutter repository. See also f: labels. p: material_ui material_ui package in flutter/packages labels Jun 10, 2026

@navaronbracke navaronbracke left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some remarks on the tests and a gotcha with the shortcuts map (I think)

result = Padding(padding: padding, child: result);
}

final Map<ShortcutActivator, Intent> shortcutMap = switch (MediaQuery.navigationModeOf(

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this go in didChangeDependencies() ?

I do recall the docs for shortcuts saying that you should avoid recreating the shortcut map during build(),
since build() is called many times

),
),
);
return () => values;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I find this a bit of an anti pattern? Could we make the method return Future and only pump the frame, while using a GlobalKey to retrieve the value?

WidgetTester tester, {
required NavigationMode navigationMode,
}) async {
var values = const RangeValues(40, 80);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we put the values in the test itself? Now it is a bit of a hidden value of this method

await tester.pumpAndSettle();

// Now the arrow keys adjust the focused (start) thumb.
await tester.sendKeyEvent(LogicalKeyboardKey.arrowRight);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we test both left and right?

expect(values().end, 80);
});

testWidgets('in editing mode, arrow keys change the value', (WidgetTester tester) async {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I find the distinction between this test and "pressing enter enters editing mode so arrow keys change the value" a bit dubious?

@github-actions github-actions Bot removed the CICD Run CI/CD label Jun 18, 2026
@Piinks Piinks added the Decoupling: Not ready to port yet Instructions will be provided when this is ready to move to flutter/packages. label Jun 24, 2026
@Piinks

Piinks commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

I've marked this PR as not ready to port to flutter/packages yet.
We'll provide instructions to move this change over to material_ui/cupertino_ui once ready to receive PRs. Thank you!

@Piinks

Piinks commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

Closing as replaced by flutter/packages#12630

@Piinks Piinks closed this Sep 2, 2026
auto-submit Bot pushed a commit to flutter/packages that referenced this pull request Sep 18, 2026
…gationMode.directional` (#12630)

Ports flutter/flutter#187816 to `material_ui`, following the instructions in flutter/flutter#188444. The commits were cherry-picked from the original PR, with only file paths and imports adjusted for this repo.

In `NavigationMode.directional` (TV remotes, D-pads) the arrow keys are needed to move focus between views, so a focused `RangeSlider` thumb had no way to adjust its value. This adds the pattern discussed in flutter/flutter#181968:

- Arrow keys only move focus.
- Enter on a focused thumb enters a value adjustment mode, where Left and Right adjust the value.
- Enter again, or losing focus, exits that mode.

`NavigationMode.traditional` is unchanged: arrow keys adjust the value directly. This mirrors the keyboard handling `Slider` already has in this package.

## Tests

New test group `RangeSlider keyboard with NavigationMode.directional` in `packages/material_ui/test/range_slider_test.dart`, covering each case above plus traditional navigation.

Fixes flutter/flutter#181968

Supersedes flutter/flutter#187816, which will be closed with a pointer to this PR.

## Pre-Review Checklist

**Note**: The Flutter team is currently trialing the use of [Gemini Code Assist for GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code). Comments from the `gemini-code-assist` bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.

[^1]: Regular contributors who have demonstrated familiarity with the repository guidelines only need to comment if the PR is not auto-exempted by repo tooling.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Decoupling: Not ready to port yet Instructions will be provided when this is ready to move to flutter/packages. framework flutter/packages/flutter repository. See also f: labels. p: material_ui material_ui package in flutter/packages

Projects

None yet

Development

Successfully merging this pull request may close these issues.

RangeSlider needs alternative input method for NavigationMode.directional

3 participants