Skip to content

Conversation

@egramond
Copy link
Contributor

@egramond egramond commented May 5, 2022

Updating Slider Widget to allow up and down arrow keys to navigate out of the slider.

This prevents users using directional navigation from becoming stuck on the slider once they navigate to it.

@flutter-dashboard flutter-dashboard bot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels May 5, 2022
@chunhtai chunhtai self-requested a review May 5, 2022 20:59
@chunhtai
Copy link
Contributor

chunhtai commented May 5, 2022

Do you have a repro to demonstrate the problem?

@egramond
Copy link
Contributor Author

egramond commented May 5, 2022

cc @clocksmith
cc @gspencergoog
This is a fresh copy of #102116

@gspencergoog
Copy link
Contributor

@chunhtai this happens when a directional interface is created (like with a TV remote), and if up and down are mapped as well as left and right, then the slider "traps" the focus, since you move onto the slider and then can't move off at all (it just adjusts the slider no matter which direction you try to go). This PR will change it so that left and right still adjust the slider, but up and down can navigate you off of it.

I've asked the material designers about this, but they don't appear to have any specs yet for key bindings.

@egramond
Copy link
Contributor Author

egramond commented May 5, 2022

I've CC'd you both on the internal Google bug in our app if that helps. There is a link to a video in there.

@chunhtai
Copy link
Contributor

chunhtai commented May 5, 2022

I am just throwing ideas. can the slider bubble up the intent if the slider reach the max/min value when arrow up and down?

@gspencergoog
Copy link
Contributor

It could, but then it would be impossible to adjust the slider to any value other than max/min (and leave it set there and move on to something else).

@chunhtai
Copy link
Contributor

chunhtai commented May 5, 2022

I did a few test on different platforms. on Android, it looks like the up and down can escape the slider while left right change the value. On the mac chrome, surprisingly, the up down arrows also change the value, and you can't escape the focus. I am using this example https://www.w3schools.com/howto/howto_js_rangeslider.asp

@gspencergoog
Copy link
Contributor

This is because Android has directional navigation built in and the web doesn't. Perhaps this change should be sensitive to kIsWeb and only disable up/down value changes there, but if the developer wants to implement a TV or game interface that runs in a browser, I'm not sure how they would disable them.

@egramond
Copy link
Contributor Author

egramond commented May 5, 2022

Right, the chrome browser is being primarily navigated via tab and shift-tab, not directional navigation.

The TV interface in a browser is exactly what we are building here, so kIsWeb would not help us. One alternative that would work for us would be to check for NavigationMode.directional in the MediaQuery, which was my first attempt at this.

@chunhtai
Copy link
Contributor

chunhtai commented May 5, 2022

We may need to be careful about mobile web user if we check kIsWeb though. I think we can make it platform dependent. For example, Android/iOS can up down navigate, while macOS/Windlows/Linux can't.

Although we may not be able fix case where people want this behavior on desktop (for example steam app), but I think we can figure that out if that becomes a problem?

@gspencergoog
Copy link
Contributor

I like the idea of predicating it on the NavigationMode. That's why we added that in the first place.

@egramond
Copy link
Contributor Author

egramond commented May 6, 2022

OK, so, back to predicating this change NavigationMode.directional then?

@egramond
Copy link
Contributor Author

egramond commented May 6, 2022

I went ahead and reverted the change to my original NavigationMode-based implementation since that seems to be where this discussion is leaning now.

@egramond egramond changed the title Updating the Slider Widget to allow up and down arrow keys to navigate out of the slider. Updating the Slider Widget to allow up and down arrow keys to navigate out of the slider when in directional NavigationMode. May 6, 2022
Copy link
Contributor

Choose a reason for hiding this comment

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

This can be a static const since it is const anyway?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done

Copy link
Contributor

Choose a reason for hiding this comment

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

same here

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done.

Copy link
Contributor

Choose a reason for hiding this comment

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

It may be cleaner to use a local variable instead of a local function to get the shortcuts.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done.

Copy link
Contributor

Choose a reason for hiding this comment

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

In this case, It may be more beneficial to use switch case so the lint would warn when if we add a new navigation mode in the future

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done.

…e out of the Slider when using the directional NavigationMode.
Copy link
Contributor

@chunhtai chunhtai left a comment

Choose a reason for hiding this comment

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

LGTM

@chunhtai chunhtai requested a review from gspencergoog May 6, 2022 21:24
Copy link
Contributor

@gspencergoog gspencergoog left a comment

Choose a reason for hiding this comment

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

32384589-a60f0e74-c078-11e7-9bc1-e5b5287aea9d

@fluttergithubbot fluttergithubbot merged commit ae7fcc7 into flutter:master May 7, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request May 7, 2022
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 7, 2022
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 9, 2022
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 9, 2022
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 9, 2022
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 9, 2022
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 9, 2022
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 9, 2022
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 9, 2022
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
@egramond egramond deleted the slider_nav_v3 branch May 9, 2022 18:03
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 9, 2022
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 9, 2022
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 9, 2022
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
ditman added a commit to ditman/flutter-packages that referenced this pull request May 9, 2022
Roll Flutter from b305eb6 to 4c57320 (33 revisions)

flutter/flutter@b305eb6...4c57320

2022-05-09 [email protected] Roll Flutter Engine from 71b9adccfb63 to 6248a5a9ae28 (1 revision) (flutter/flutter#103350)
2022-05-09 [email protected] Roll Flutter Engine from 3af7fb24d4dd to 71b9adccfb63 (1 revision) (flutter/flutter#103347)
2022-05-09 [email protected] [flutter_tools] stringArg refactor (flutter/flutter#103231)
2022-05-09 [email protected] Replace ListView with ListView.builder for LicensesPage (flutter/flutter#102692)
2022-05-09 [email protected] Adds `menuBarMenuLabel`, and removes unneeded key localizations (flutter/flutter#102100)
2022-05-09 [email protected] Roll Plugins from 49b06b3 to c5c319a (15 revisions) (flutter/flutter#103345)
2022-05-09 [email protected] Roll Engine from e7c44a582c58 to 3af7fb24d4dd (1 revision) (flutter/flutter#103334)
2022-05-09 [email protected] Roll Engine from c02712fe1160 to e7c44a582c58 (1 revision) (flutter/flutter#103333)
2022-05-09 [email protected] Roll Engine from 6efd8f00dcc6 to c02712fe1160 (1 revision) (flutter/flutter#103327)
2022-05-09 [email protected] `CupertinoTabScaffold`/`CupertinoTabController`: Add interactive examples (flutter/flutter#103196)
2022-05-09 [email protected] Roll Engine from c930e64a13bc to 6efd8f00dcc6 (1 revision) (flutter/flutter#103323)
2022-05-08 [email protected] Roll Engine from d0e6e14d27cc to c930e64a13bc (2 revisions) (flutter/flutter#103308)
2022-05-08 [email protected] Roll Engine from fffb3eb58e7d to d0e6e14d27cc (1 revision) (flutter/flutter#103307)
2022-05-08 [email protected] Use consistent date instead of DateTime.now() in evaluation tests (flutter/flutter#103269)
2022-05-08 [email protected] Roll Engine from 259ccadd8203 to fffb3eb58e7d (1 revision) (flutter/flutter#103298)
2022-05-08 [email protected] Roll Engine from 0b84783081a7 to 259ccadd8203 (1 revision) (flutter/flutter#103293)
2022-05-08 [email protected] Roll Engine from 19d5f037f221 to 0b84783081a7 (1 revision) (flutter/flutter#103291)
2022-05-08 [email protected] Roll Engine from 2d1f34cbdde2 to 19d5f037f221 (1 revision) (flutter/flutter#103289)
2022-05-08 [email protected] Roll Engine from b89e093d887f to 2d1f34cbdde2 (1 revision) (flutter/flutter#103287)
2022-05-08 [email protected] Roll Engine from aa80520b7fc9 to b89e093d887f (1 revision) (flutter/flutter#103286)
2022-05-08 [email protected] Roll Engine from 4c05cb763866 to aa80520b7fc9 (1 revision) (flutter/flutter#103283)
2022-05-07 [email protected] Roll Engine from 235d951ccfbd to 4c05cb763866 (1 revision) (flutter/flutter#103279)
2022-05-07 [email protected] Roll Engine from 24466845e7a9 to 235d951ccfbd (4 revisions) (flutter/flutter#103276)
2022-05-07 [email protected] Roll Engine from 2d2f8629cdb2 to 24466845e7a9 (1 revision) (flutter/flutter#103274)
2022-05-07 [email protected] Roll Engine from 4a358030cb07 to 2d2f8629cdb2 (1 revision) (flutter/flutter#103273)
2022-05-07 [email protected] [flutter_tools] add --uninstall-first flag and pipe it through to ios-deploy (flutter/flutter#102948)
2022-05-07 [email protected] Fix a `_WrappedScrollBehavior.shouldNotify` bug (flutter/flutter#103267)
2022-05-07 [email protected] Remove custom `unawaited`, prefer `dart:async` version (flutter/flutter#103212)
2022-05-07 [email protected] Added clipBehavior on TabBarView (flutter/flutter#103166)
2022-05-07 [email protected] Fix empty Stack with infinite constraints throws (flutter/flutter#102642)
2022-05-07 [email protected] Updating the Slider Widget to allow up and down arrow keys to navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
2022-05-07 [email protected] Fix `DropdownButton` menu clip (flutter/flutter#102970)
2022-05-07 [email protected] Roll Engine from 094cb30943a5 to 4a358030cb07 (1 revision) (flutter/flutter#103260)

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 [email protected] on the revert to ensure that a human
is aware of the problem.

To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose

To report a problem with the AutoRoller itself, please file a bug:
https://bugs.chromium.org/p/skia/issues/entry?template=Autoroller+Bug

Documentation for the AutoRoller is here:
...
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 9, 2022
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 9, 2022
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 9, 2022
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 9, 2022
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants