DatePicker Component - Disable Function doesn't work completely

[vickybonk]

Package name(s)

Lab (@salt-ds/lab)

Package version(s)

@salt-ds/lab": "1.0.0-alpha.48"

Description

disabled prop with DatePicker isn't completely working properly --> it's disabled when clicking on the calendar icon but still allows an input via the textbox

Steps to reproduce

    <DatePicker
      style={{ width: "200px" }}
      disabled={true}
      onSelectionChange={(event, selectedDate) => {
        if (event.type !== "click") {return;}
        setSchedule(new Date(selectedDate as string));
      }}
      inputProps={{ "aria-label": "schedulePicker" }}
    />

Expected behavior

When testing I expected the DatePicker component to be disabled - but it still allowed input so my test failed

Operating system

• [ ] macOS
• [X] Windows
• [ ] Linux
• [ ] iOS
• [ ] Android

Browser

• [X] Chrome
• [ ] Safari
• [ ] Firefox
• [ ] Edge

Are you a JPMorgan Chase & Co. employee?

• [X] I am an employee of JPMorgan Chase & Co.

[FranklinBarto]

Hello @vickybonk I do realise your frustration with the textbox, I will share a work around you can use below.

You could disable the textbox by adding an additional props readOnly={true}. In addition to this, you can use the emptyReadOnlyMarker props to then set a placeholder.

<DatePicker
  style={{ width: "200px" }}
  disabled={true}
  readOnly={true}
  emptyReadOnlyMarker={'1-2-2024'}
  onSelectionChange={(event, selectedDate) => {
    if (event.type !== "click") {return;}
    setSchedule(new Date(selectedDate as string));
  }}
  inputProps={{ "aria-label": "schedulePicker" }}
/>

[vickybonk]

thank you!