Skip to content

[pickers] Improve DOM event management on useField#5901

Merged
flaviendelangle merged 5 commits into
mui:masterfrom
flaviendelangle:field-events
Aug 26, 2022
Merged

[pickers] Improve DOM event management on useField#5901
flaviendelangle merged 5 commits into
mui:masterfrom
flaviendelangle:field-events

Conversation

@flaviendelangle

@flaviendelangle flaviendelangle commented Aug 25, 2022

Copy link
Copy Markdown
Member

https://deploy-preview-5901--material-ui-x.netlify.app/x/react-date-pickers/date-field/

@flaviendelangle flaviendelangle added the scope: pickers Changes related to the date/time pickers. label Aug 25, 2022
@flaviendelangle flaviendelangle self-assigned this Aug 25, 2022
@mui-bot

mui-bot commented Aug 25, 2022

Copy link
Copy Markdown

These are the results for the performance tests:

Test case Unit Min Max Median Mean σ
Filter 100k rows ms 410.3 723.2 625.7 582.1 133.644
Sort 100k rows ms 602.6 1,188 1,188 968.1 199.765
Select 100k rows ms 235.6 330 300.6 294.3 33.108
Deselect 100k rows ms 155.9 363.2 227.9 253.9 75.302

Generated by 🚫 dangerJS against 2d7f0c9

@flaviendelangle flaviendelangle changed the title [pickers] Improve DOM event management on useField [pickers] Improve DOM event management on useField Aug 25, 2022
@oliviertassinari

oliviertassinari commented Aug 25, 2022

Copy link
Copy Markdown
Member

I have quickly played with this problem. Applying this diff on HEAD seems to solve the problem too:

diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts
index 0f5642aa0..3447f0a51 100644
--- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts
+++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts
@@ -317,8 +317,13 @@ export const useField = <
   });

   const handleInputFocus = useEventCallback(() => {
-    // TODO: Avoid applying focus when focus is caused by a click
-    updateSelectedSections(0, state.sections.length - 1);
+    setTimeout(() => {
+      if (inputRef.current.selectionEnd - inputRef.current.selectionStart === 0) {
+        handleInputClick();
+      } else {
+        updateSelectedSections(0, state.sections.length - 1);
+      }
+    })
   });

   const handleInputBlur = useEventCallback(() => updateSelectedSections());

@oliviertassinari oliviertassinari added the type: bug It doesn't behave as expected. label Aug 25, 2022
@LukasTy

LukasTy commented Aug 26, 2022

Copy link
Copy Markdown
Member

The current implementation introduces the following regression.
Click on section -> blur -> focus with tab -> arrow navigation does not work.
The same issue is not happening with the solution suggested by Olivier, which also looks more simple. 🤔
What do you think @flaviendelangle ?

Screen.Recording.2022-08-26.at.14.15.06.mov

@flaviendelangle

Copy link
Copy Markdown
Member Author

@LukasTy I can implement it of course

@flaviendelangle

Copy link
Copy Markdown
Member Author

Done

@flaviendelangle
flaviendelangle merged commit ebd194f into mui:master Aug 26, 2022
@flaviendelangle
flaviendelangle deleted the field-events branch August 26, 2022 15:21
@flaviendelangle

Copy link
Copy Markdown
Member Author

The approach we went for do not work on Android
I'll try to find a workaround later

alexfauquette pushed a commit to alexfauquette/mui-x that referenced this pull request Sep 20, 2022
@oliviertassinari oliviertassinari added design This is about UI or UX design, please involve a designer. and removed design: ux labels Aug 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

design This is about UI or UX design, please involve a designer. scope: pickers Changes related to the date/time pickers. type: bug It doesn't behave as expected.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants