DateInput is not updating the value of the DatePickerDialog

[tuantvu]

Description

When using the DateInput or DatePickerInput with a DatePickerDialog, on change of the DateInput or DatePickerInput does not update the value in the DatePickerDialog. This can be recreate-able in the Saas-UI live demo. Consistently keeping the values in sync between the two components feels more user friendly.

Link to Reproduction

https://saas-ui.dev/docs/components/date-time/date-input

Steps to reproduce

1. Go to any live demo example
2. Edit the input date field to another month or year
3. Open the date picker dialog using the calendar icon
4. The date picker dialog will still show the current month and year

Saas UI Version

0.31.1

Chakra UI Version

2.2.0

Browser

Chrome 121.0.6167.184

Operating System

• [X] macOS
• [ ] Windows
• [ ] Linux

Additional Information

[linear[bot]]

SUI-412 DateInput is not updating the value of the DatePickerDialog

[tuantvu]

I stumbled upon a workaround. I don't know why, but when I extracted the DatePickerDialog into a private component, the DatePickerInput and DatePickerDialog stays in sync. Using the DatePickerDialog or wrapping it with one layer of Box doesn't work. See example below.

const MyComponent = () => {
    // private component
    const Dialog = () => (
      <DatePickerDialog>
        <DatePickerCalendar />
      </DatePickerDialog>
    )

    return (
      <DatePicker
        placement="bottom"
        granularity="day"
      >

          <DatePickerInput />

        {/* WORKS*/}
        <Dialog />

        {/* DOES NOT WORK
          <DatePickerDialog>
            <DatePickerCalendar />
          </DatePickerDialog>
        */}

         {/* ALSO DOES NOT WORK
         <Box>
          <DatePickerDialog>
            <DatePickerCalendar />
          </DatePickerDialog>
        </Box> */}
      </DatePicker>
    )
}

[Pagebakers]

Interesting that this fixes it, thanks for the info. I'm going to investigate this now.

[Pagebakers]

The value is actually in sync, but the calendar doesn't open on the correct month.

[Pagebakers]

@tuantvu it seems like a limitation of react aria calendar. Found a fix, will release it later this week.

[Pagebakers]

This was released in 0.12.23