fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

[Bug]: DatePicker displays given value even when uncontrolled

Open rocketBANG opened this issue 2 years ago • 1 comments
trafficstars

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)

image

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.

rocketBANG avatar Nov 07 '23 20:11 rocketBANG