-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
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
[DateRangePicker] Avoid unnecessary field section focusing #16474
[DateRangePicker] Avoid unnecessary field section focusing #16474
Conversation
packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerField.ts
Outdated
Show resolved
Hide resolved
Deploy preview: https://deploy-preview-16474--material-ui-x.netlify.app/ |
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.
I have updated the solution. ℹ️
I think it is more robust and the checks are localized to the closest possible place. 👌
@@ -49,6 +49,15 @@ export const useRangePosition = ( | |||
|
|||
const sections = singleInputFieldRef.current.getSections(); | |||
const targetActiveSectionIndex = newRangePosition === 'start' ? 0 : sections.length / 2; | |||
const activeSectionIndex = singleInputFieldRef.current.getActiveSectionIndex(); | |||
// if the active section is already within the target range, we don't need to update it. |
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.
Avoid resetting/jumping focus to the first section when switching range positions with the mouse on a single input range field.
Screen.Recording.2025-02-12.at.14.57.49.mov
if (!sectionListRef.current) { | ||
if ( | ||
!sectionListRef.current || | ||
// if the field is already focused, we don't need to focus it again |
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.
Avoid resetting/jumping focus to the first section when switching fields with the mouse on a multi input range field.
Screen.Recording.2025-02-12.at.15.00.30.mov
@@ -202,6 +202,9 @@ export const useFieldV6TextField: UseFieldTextField<false> = (params) => { | |||
return nextSectionIndex === -1 ? sections.length - 1 : nextSectionIndex - 1; | |||
}, | |||
focusField: (newSelectedSection = 0) => { | |||
if (getActiveElement(document) === inputRef.current) { |
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.
Avoid resetting/jumping focus to the first section when switching fields with the mouse on a multi input v6 (native input) range field.
Screen.Recording.2025-02-12.at.15.02.32.mov
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.
🙏 The fix makes a lot of sense
Cherry-pick PRs will be created targeting branches: v7.x |
Fixes #15880.