fluentui
fluentui copied to clipboard
[Bug]: DatePicker displays given value even when uncontrolled
Library
React / v8 (@fluentui/react)
System Info
System:
OS: Windows 10 10.0.22621
CPU: (16) x64 Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz
Memory: 12.78 GB / 31.71 GB
Browsers:
Edge: Chromium (118.0.2088.76)
Internet Explorer: 11.0.22621.1
Are you reporting Accessibility issue?
no
Reproduction
https://codepen.io/rocketbang/pen/VwgpYQK
Bug Description
Actual Behavior
A DatePicker component initialized with an undefined value prop should be acting in uncontrolled mode, e.g. changing the value prop on a subsequent render should cause no change
Instead it does cause a change, the formatted value displayed inside the text box is updated to the new value (even if an undefined value is given). This in turn makes it seems like the component is acting in controlled mode, however it is not as the internal state value has not been updated.
This is evident when a maxDate or minDate is set as those show errors based on the internal state value not whatever the prop is. In the above reproduction, the user selects a date, then we update the value prop and maxDate prop to something before the time the user selected. Based on what is shown in the text box to the user, this should be a valid date (it appears behind the maxDate value), but it is not compared to the internal date value (still whatever the user manually selected in the calendar)
Expected Behavior
I would expect the value in the text box to reflect the internal state when running in uncontrolled mode. This would make it far easier to realize the component is in an uncontrolled mode instead of half uncontrolled, half controlled
Logs
No response
Requested priority
Normal
Products/sites affected
No response
Are you willing to submit a PR to fix?
yes
Validations
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] The provided reproduction is a minimal reproducible example of the bug.