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

[Pickers] Ensure input value is reset in the same commit as the value #25972

Merged
merged 3 commits into from
Apr 28, 2021

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Apr 25, 2021

The re-computation of state in useEffect was suspicious to me.

It seems to me that the "input value" (named innerInputValue) was supposed to be what the user inputs. The implementation made sure that this value is reset if the actual date value changed. But only if the textbox isn't focused to avoid interrupting the user while typing. This created some weird states where outside value updates were dropped during input or when the textbox was still focused but the user is idle.

This requires some logic that leads to tearing (state updates in useEffect). The new implementation is a bit more verbose but is hopefully clearer in its intent. It's probably better to re-implement this by controlling the rawValue in usePickerState and then deciding whether we want to expose controlled vs uncontrolled input values.

Manual testing: https://deploy-preview-25972--material-ui.netlify.app/components/date-picker/#basic-usage

@eps1lon eps1lon added the component: pickers This is the name of the generic UI component, not the React module! label Apr 25, 2021
@mui-pr-bot
Copy link

mui-pr-bot commented Apr 25, 2021

Details of bundle changes

Generated by 🚫 dangerJS against 4e35bd9

@eps1lon eps1lon changed the title [pickers] Remove redundant isFocused check when updating input value [pickers] Input value is no longer controllable Apr 25, 2021
@eps1lon eps1lon changed the title [pickers] Input value is no longer controllable [pickers] Ensure input value is reset in the same commit as the value Apr 26, 2021
@eps1lon eps1lon marked this pull request as ready for review April 26, 2021 10:13
@eps1lon eps1lon merged commit 8342683 into mui:next Apr 28, 2021
@eps1lon eps1lon deleted the fix/pickers/masked-input-tearing branch April 28, 2021 08:16
@oliviertassinari oliviertassinari changed the title [pickers] Ensure input value is reset in the same commit as the value [Pickers] Ensure input value is reset in the same commit as the value Apr 28, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: pickers This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants