[Bug]: When using onSelectDate, the value in the field does not update

[tszypulasii]

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.22631
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
    Memory: 5.43 GB / 31.21 GB
  Browsers:
    Edge: Chromium (126.0.2592.102)
    Internet Explorer: 11.0.22621.3527

Are you reporting an Accessibility issue?

no

Reproduction

https://codepen.io/tszypulasii/pen/eYwMOMX

Bug Description

This is most likely the same issue as in previous issues e.g. https://github.com/microsoft/fluentui/issues/1274 https://github.com/microsoft/fluentui/issues/15924

This was supposedly fixed via https://github.com/microsoft/fluentui/pull/1504 but not sure since when the issue is still present in fluentui. I am using v8.

When using any setState method inside the function passed to onSelectDate the value from the Datepicker does not update and is not shown to the end user.

Codepen with example https://codepen.io/tszypulasii/pen/eYwMOMX

the key is to pass in the Datepicker props ... onSelectDate={(date)=>{ setTest(date) }} ... where setTest is any setState

Actual behavior: DatePicker doesn't show selected date when onSelectDate is implemented.

Expected behavior: DatePicker should display the selected date, even if onSelectDate is implemented.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

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.

[TristanWatanabe]

@tszypulasii Looking at the repro link you provided, to get the desired behavior, you just need to pass the value prop to the DatePicker like so

      <DatePicker
        onSelectDate={(date)=>{
          setTest(date)
        }}
        value={test}
      />

[tszypulasii]

HI @TristanWatanabe thanks for the prompt response! I understand that passing the value prop and controlling state myself will work but in my opinion this is beside the point. This codepen is a very simple example just to ilustrate the issue. The main issue is that I would expect to not have to maintain value just because I am using the callback onSelectDate. Note that setTest could be any state for any other logic or component and not necessarily the state of the DatePicker. This has been already well noted by WesselKuipers https://github.com/microsoft/fluentui/issues/1274 whom I will cite here to reiterate the main issue:

"It strikes me as a bit strange or at least inconsistent that you have to keep track of the internal value yourself when you don't have to do this with components like TextField.

The main issue I was trying to report was the fact that when you implement the onSelectDate callback to get notified when a user picks a date, the DatePicker component suddenly doesn't display the date that was just picked.

Is there a reason why this behaviour is inconsistent compared to when you implement onChange in TextField?"

I would also add that this is inconsistent with all FluentUI components I have used so far (that have some kind of onChange prop) like ComboBox, DetailsList,Toggle etc.

[microsoft-github-policy-service[bot]]

no assignees

Gentle ping that this issue needs attention.

[swapanmandi]

You have to use different state and pass boundaries and props 👍

<DatePicker minDate={minDate} maxDate={maxDate} onSelectDate={(date)=>{ setTest2(date) }} value={test2} />

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".

[ValentinaKozlova]

Sorry, we are not supporting V8 anymore for bugfixes / features unless they are critical a11y, or security related. Please try to migrate to V9 and use that DatePicker component.