Controlled range date picker bug when clearing the dates after selecting just one

[FerranMontoliu]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.8.0

What package has an issue?

@mantine/dates

What framework do you use?

create-react-app (CRA)

In which browsers you can reproduce the issue?

All

Describe the bug

Brief explanation

I have a controlled DatePicker with type="range". In my component, I have a button for users to clear the selection they are performing. The issue is that, if a user has selected the start date and not the end date, even if you set the value to [null, null], the calendar still has the start date selected.

Steps to reproduce:

1. Open the stackblitz url provided.
   

2. Select one date in the calendar.
   

3. Click the button to clear the dates.
   

4. Move the cursor around the calendar. You will see that the start date does not appear to be selected, but the blue shadow is still there when you hover over the calendar.
   

5. Click on another day. Now your selection will take the first date (which should have been cleared), and the second date (the one you just selected).
   

Minimal example used

export default function App() {
  const [value, setValue] = useState([null, null]);

  const handleChange = (val) => {
    setValue(val);
  };

  const clearRange = () => {
    setValue([null, null]);
  };

  return (
    <Stack>
      <DatePicker
        type="range"
        value={value}
        onChange={handleChange}
        allowSingleDateInRange
      />

      <Button onClick={clearRange}>CLEAR</Button>
    </Stack>
  );
}

If possible, include a link to a codesandbox with a minimal reproduction

https://stackblitz.com/edit/react-ojxzj7?file=src%2FApp.js

Possible fix

When setting the value to [null, null], the dates should be cleared.

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

Fixed in 7.8.1