DateRangePicker's controlled value can't be set to null to show the placeholder instead of the previous selected date

[AlexLengyel]

🐛 Bug Report

Value prop can't be set to null (as in the documentation) in DateRangePicker because TypeScript needs a DateValue type of value. Once the value prop has received a value then the value can't be removed completely from the date field to show just a placeholder again.

🤔 Expected Behavior

If the value prop in the DateRangePicker receives a null or undefined value then the previous selected date should be removed from the date field and should display a placeholder again instead of the previous selected date.

😯 Current Behavior

If the value prop in the DateRangePicker receives a null or undefined value then the previous selected date stays there in the date field.

🔦 Context

I am trying to reset the DateRangePicker's value to nothing to show the placeholder again after the previously selected date has been removed from the filtering list, so it makes less confusing for the users.

💻 Code Sample

🌍 Your Environment

Software	Version(s)
react-spectrum	3.17.0
Browser	Google Chrome
Operating System	MacOS

🧢 Your Company/Team

AEM - Admin UI, Odin project

[dj-neza]

Same issue here. The date range picker considers undefined value as a sign of an uncontrolled component and what's even weirder, seems to revert selection to the first selection ever made (e.g. if the user tries a few different options before attempting to reset the range altogether).

Haven't tested a lot and setting the value to { start: null, end: null } looks ok but in that case Typescript becomes a problem since start and end are not allowed to be null. Ideally that should be possible to enable a 'truly' controlled component.

[mrcljx]

I guess ValueBase needs to accept null for forcing controlled mode?

  export interface ValueBase<T, C = T> {
    /** The current value (controlled). */
-   value?: T,
+   value?: T | null,
    /** The default value (uncontrolled). */
    defaultValue?: T,
    /** Handler that is called when the value changes. */
    onChange?: (value: C) => void
}

[lishichengyan]

I'm trying to repro the issue with the latest version, here's the code sample -

function ControlledResetExample(props) {
  let [value, setValue] = React.useState(null);

  return (
    <Flex direction="column" alignItems="center" gap="size-150">
      <DateRangePicker label="Controlled" {...props} value={value} onChange={chain(setValue, action('onChange'))} />
      <ActionButton onPress={() => setValue({start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)})}>Change value</ActionButton>
      <ActionButton onPress={() => setValue(null)}>Clear</ActionButton>
    </Flex>
  );
}

Seems to me setting value to null works just fine.

[snowystinger]

@lishichengyan do you have TS strict mode on? that can mess up some of these explicit vs implicit null's

[lishichengyan]

@lishichengyan do you have TS strict mode on? that can mess up some of these explicit vs implicit null's

no, in tsconfig.json I see "strict": false,

[B0und]

I'm trying to repro the issue with the latest version, here's the code sample -

function ControlledResetExample(props) {
  let [value, setValue] = React.useState(null);

  return (
    <Flex direction="column" alignItems="center" gap="size-150">
      <DateRangePicker label="Controlled" {...props} value={value} onChange={chain(setValue, action('onChange'))} />
      <ActionButton onPress={() => setValue({start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)})}>Change value</ActionButton>
      <ActionButton onPress={() => setValue(null)}>Clear</ActionButton>
    </Flex>
  );
}

Seems to me setting value to null works just fine.

This issue appears to be related to granularity. If you set it to minute then the behaviour becomes weird. I made a repro:

https://codesandbox.io/s/loving-christian-ciisig?file=/src/DateRangePicker.js

1. Press on the calendar and select a date range

2. close it and press reset button

3. if you open the datepicker again, old values are persisted (i would expect them to also get reset)

P.S also calling setValue(null) - errors. (uncomment it in the file to repro)

[B0und]

@lishichengyan if anything is unclear, please let me know

[Pagebakers]

Running into this as well, also without granularity set to minute.

When setting the value to null, it doesn't reset the value and clear the segments.
Your example is helpful though, I suppose I need to explicitly call state.setValue to update the internal state, will try it out.

[LFDanLu]

Apologies, I believe I misunderstood this issue the first time I looked at it, thought this was referring to a typescript strict mode issue. I've confirmed the issue where setting the date values to null isn't clearing the the visual range selected in the calendar dropdown when the granularity is set to "minute" or "second".

EDIT: Did some quick digging, looks like we properly update the tracked controlled value in useDateRangeState but not the date range value. I believe we can just call setSelectedDateRange and setSelectedTimeRange with null here at the very least, will need to move the state initialization up before that section