[Web] showTimePicker should highlight minutes when pressing the TAB button in the hours field
#165830
Comments
|
@geronimol |
|
@darshankawar Just tested with the latest master version and isn't working as expected. Note: Text should be completely highlighted, so it should be removed when you press the backspace button once(not twice). Basically the same behavior as when you jump from one TextField with text to another using TAB. |
|
@geronimol |
|
@darshankawar I am not sure if this is a bug either. But I thought these fields were supposed to behave the same way as a TextField in web. |
|
@geronimol |
|
@darshankawar Please check what happens in the example below when you have focused the first class FocusTest extends StatefulWidget {
const FocusTest({super.key});
@override
State<FocusTest> createState() => _FocusTestState();
}
class _FocusTestState extends State<FocusTest> {
TextEditingController controller1 = TextEditingController(), controller2 = TextEditingController();
@override
void initState() {
super.initState();
controller1.text = '12';
controller2.text = '00';
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
TextFormField(controller: controller1),
TextFormField(controller: controller2),
],
),
),
);
}
}2025-03-27.14-15-43.movAs you can see, the "00" text is completely highlighted. Should the picker fields work the same way? |
|
I'll keep the issue open for team's tracking for expected behavior or this is something need to be fixed or not. |
|
I added this to team-web as it seems to only happen there, but it also was not fully reproducible. Let me know if it would be better for text-input to take this. |
The reason the time picker field doesn't behave the same way is because it's field has |
<!-- Thanks for filing a pull request! Reviewers are typically assigned within a week of filing a request. To learn more about code review, see our documentation on Tree Hygiene: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md --> This PR addresses the issue in time_picker.dart where pressing the TAB key to navigate between the hour and minute fields in input mode doesn't properly select the text in the newly focused field. **What Changed** - Added focus traversal logic in the _HourMinuteTextFieldState class's initState method that: 1. Properly handles TAB key presses to move focus to the next field 2. Automatically selects all text when a field gains focus - Added tests in time_picker_test.dart to verify that: 1. The hour field's text is selected when it gains focus 2. Pressing TAB moves focus to the minute field 3. The minute field's text is selected when it receives focus via TAB key **Why This Matters** This change improves accessibility and usability of the time picker in input mode. When users navigate using the keyboard (pressing TAB), they expect the text in the newly focused field to be fully selected, allowing them to immediately type a new value without having to manually delete the existing text. This is standard behavior in form fields and now the TimePicker component follows this expected pattern. **Before the change:** web: https://time-picker-0423-before-change.web.app/ mobile: https://github.com/user-attachments/assets/532c8aa2-4f8d-4118-9eaa-2fc6c2825486 **After the change:** web: https://time-picker-04232025.web.app/ mobile: https://github.com/user-attachments/assets/9271b3b0-9ece-479e-a01e-a62e31b1d6c7 **Issue to fix:** #165830 ## 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]. - [ ] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] 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. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. <!-- Links --> [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
|
Closing as fixed, see #167766 |
<!-- Thanks for filing a pull request! Reviewers are typically assigned within a week of filing a request. To learn more about code review, see our documentation on Tree Hygiene: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md --> This PR addresses the issue in time_picker.dart where pressing the TAB key to navigate between the hour and minute fields in input mode doesn't properly select the text in the newly focused field. **What Changed** - Added focus traversal logic in the _HourMinuteTextFieldState class's initState method that: 1. Properly handles TAB key presses to move focus to the next field 2. Automatically selects all text when a field gains focus - Added tests in time_picker_test.dart to verify that: 1. The hour field's text is selected when it gains focus 2. Pressing TAB moves focus to the minute field 3. The minute field's text is selected when it receives focus via TAB key **Why This Matters** This change improves accessibility and usability of the time picker in input mode. When users navigate using the keyboard (pressing TAB), they expect the text in the newly focused field to be fully selected, allowing them to immediately type a new value without having to manually delete the existing text. This is standard behavior in form fields and now the TimePicker component follows this expected pattern. **Before the change:** web: https://time-picker-0423-before-change.web.app/ mobile: https://github.com/user-attachments/assets/532c8aa2-4f8d-4118-9eaa-2fc6c2825486 **After the change:** web: https://time-picker-04232025.web.app/ mobile: https://github.com/user-attachments/assets/9271b3b0-9ece-479e-a01e-a62e31b1d6c7 **Issue to fix:** flutter#165830 ## 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]. - [ ] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] 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. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. <!-- Links --> [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
Steps to reproduce
Expected results
Minutes field highlighted in the same way as when you TAB from one to another
TextField.Actual results
Minutes field focusing at the end of the minutes, without highlighting them.
Code sample
Code sample
Screenshots or Video
Screenshots / Video demonstration
2025-03-24.16-47-47.mov
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
The text was updated successfully, but these errors were encountered: