Skip to content
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

Merged
merged 10 commits into from
Feb 13, 2025

Conversation

LukasTy
Copy link
Member

@LukasTy LukasTy commented Feb 5, 2025

Fixes #15880.

@LukasTy LukasTy added bug 🐛 Something doesn't work component: pickers This is the name of the generic UI component, not the React module! component: DateRangePicker The React component. labels Feb 5, 2025
@LukasTy LukasTy self-assigned this Feb 5, 2025
@mui-bot
Copy link

mui-bot commented Feb 5, 2025

Deploy preview: https://deploy-preview-16474--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 75dc139

@LukasTy LukasTy added needs cherry-pick The PR should be cherry-picked to master after merge v7.x labels Feb 6, 2025
Copy link
Member Author

@LukasTy LukasTy left a 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.
Copy link
Member Author

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
Copy link
Member Author

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) {
Copy link
Member Author

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

Copy link
Member

@flaviendelangle flaviendelangle left a 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

@LukasTy LukasTy merged commit fa3bd31 into mui:master Feb 13, 2025
18 checks passed
@LukasTy LukasTy deleted the fix-unnecessary-fields-refocusing branch February 13, 2025 13:27
Copy link

Cherry-pick PRs will be created targeting branches: v7.x

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: DateRangePicker The React component. component: pickers This is the name of the generic UI component, not the React module! needs cherry-pick The PR should be cherry-picked to master after merge v7.x
Projects
None yet
3 participants