-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Updating the Slider Widget to allow up and down arrow keys to navigate out of the slider when in directional NavigationMode. #103149
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
Do you have a repro to demonstrate the problem? |
|
cc @clocksmith |
|
@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. |
|
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. |
|
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? |
|
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). |
|
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 |
|
This is because Android has directional navigation built in and the web doesn't. Perhaps this change should be sensitive to |
|
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. |
|
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? |
|
I like the idea of predicating it on the |
|
OK, so, back to predicating this change NavigationMode.directional then? |
|
I went ahead and reverted the change to my original NavigationMode-based implementation since that seems to be where this discussion is leaning now. |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
same here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done.
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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.
chunhtai
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
gspencergoog
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
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: ...
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)
… navigate out of the slider when in directional NavigationMode. (flutter/flutter#103149)

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.