[datetime2] fix(DateRangeInput2): input value when controlled #5792
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #5791
Checklist
Changes proposed in this pull request:
DateRangeInput2 input focus handler should read from the controlled value rather than the state value.
When a new date is selected the onChange callback is called which updates the controlled value. On the next render cycle componentDidUpdate syncs the state value with the controlled props value and also refocuses the boundary input at the same time. During this input focus the stale value from the state is read before it has been updated leading to the input display value showing the previous value.
Reviewers should focus on:
The input blur and input change handlers already special case controlled mode could it have been intentional to have this behaviour in the input focus handler for any reason?
Screenshot
I tested this on the docs app locally by changing the example to be controlled: