🙋 Feature Request
In the v5 FluentTimePicker, the dropdown list does not properly auto-scroll to make the active value prominent. When typing, the matched item sits at the very bottom of the visible list. When opening the dropdown to edit, it doesn't auto-scroll at all when value at bottom of the list.
🤔 Expected Behavior
Whether a user is typing a value or opening the dropdown to edit an existing selection, the list should automatically scroll to position the matched/selected item at the top (or near the top) of the visible dropdown area.
Specifically:
On Type: If a user types a time (e.g., "17"), the list should auto-scroll so the matched option is at the maximum scroll position (top of the visible list), not the bottom.
On Edit: If the picker has a saved value, clicking to open the dropdown should automatically scroll the list so the selected value is immediately visible at the top.
😯 Current Behavior
When typing: The matched item appears at the very bottom of the visible list item area, even though there are more items further down the list.
When editing: The dropdown opens at the default top position, forcing the user to manually scroll down through the list to find their currently selected value.
💁 Possible Solution
Implement or adjust the scrolling mechanism within the dropdown container. When the callout opens or the input value changes, the component should calculate the scroll position of the active item and adjust the container's scrollTop so the item aligns with the top of the visible viewport, rather than just ensuring it is merely "in view" at the bottom edge.
🔦 Context
This is causing unnecessary friction in data entry. When typing, having the value appear at the bottom edge of the visible list feels like a glitch and hides the subsequent options. When editing, forcing the user to manually scroll to find a value they've already selected is a frustrating user experience, especially in forms that are used frequently.
💻 Examples
Scenario 1 (Typing): A user types "17". Currently, "17:00" appears at the bottom edge of the dropdown container. Expected: The list auto-scrolls significantly more so "17:00" is at the top of the visible list, allowing the user to easily see "17:15", "17:30", etc., right below it.
Scenario 2 (Editing): A user previously saved "14:30". They click the TimePicker to edit it. Currently, they have to scroll manually. Expected: The dropdown opens already scrolled down, with "14:30" sitting prominently at the top of the visible list.
🙋 Feature Request
In the v5 FluentTimePicker, the dropdown list does not properly auto-scroll to make the active value prominent. When typing, the matched item sits at the very bottom of the visible list. When opening the dropdown to edit, it doesn't auto-scroll at all when value at bottom of the list.
🤔 Expected Behavior
Whether a user is typing a value or opening the dropdown to edit an existing selection, the list should automatically scroll to position the matched/selected item at the top (or near the top) of the visible dropdown area.
Specifically:
On Type: If a user types a time (e.g., "17"), the list should auto-scroll so the matched option is at the maximum scroll position (top of the visible list), not the bottom.
On Edit: If the picker has a saved value, clicking to open the dropdown should automatically scroll the list so the selected value is immediately visible at the top.
😯 Current Behavior
When typing: The matched item appears at the very bottom of the visible list item area, even though there are more items further down the list.
When editing: The dropdown opens at the default top position, forcing the user to manually scroll down through the list to find their currently selected value.
💁 Possible Solution
Implement or adjust the scrolling mechanism within the dropdown container. When the callout opens or the input value changes, the component should calculate the scroll position of the active item and adjust the container's scrollTop so the item aligns with the top of the visible viewport, rather than just ensuring it is merely "in view" at the bottom edge.
🔦 Context
This is causing unnecessary friction in data entry. When typing, having the value appear at the bottom edge of the visible list feels like a glitch and hides the subsequent options. When editing, forcing the user to manually scroll to find a value they've already selected is a frustrating user experience, especially in forms that are used frequently.
💻 Examples
Scenario 1 (Typing): A user types "17". Currently, "17:00" appears at the bottom edge of the dropdown container. Expected: The list auto-scrolls significantly more so "17:00" is at the top of the visible list, allowing the user to easily see "17:15", "17:30", etc., right below it.
Scenario 2 (Editing): A user previously saved "14:30". They click the TimePicker to edit it. Currently, they have to scroll manually. Expected: The dropdown opens already scrolled down, with "14:30" sitting prominently at the top of the visible list.