Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

isOutsideRange property ends up nullifying invalid dates entirely #2240

Copy link
Copy link
Open
@deeplyfriedchicken

Description

@deeplyfriedchicken
Issue body actions

react-dates version
react-dates@21.8.0

Describe the bug
Using isOutsideRange prop will completely remove an invalid date when a date outside the range is manually typed in. This prevents us from handling invalid inputs with validation schemas like Yup and creating better error messaging experiences for our app.

Source code (including props configuration)
We recommend checking out this CodeSandbox to see the other libraries we use in conjunction with SDP.

https://codesandbox.io/s/single-date-picker-range-validation-reproducible-chrrlt?file=/src/Form.jsx:1707-2451

Steps to reproduce the behavior:

        <SingleDatePicker
            name={name}
            focused={isDatePickerOpen}
            onFocusChange={({ focused }) => setIsDatePickerOpen(focused)}
            date={value}
            onClose={() => trigger("date")}
            onDateChange={(date) => {
              onChange({ target: { name, value: date } });
            }}
            numberOfMonths={1}
            isOutsideRange={(day) =>
              isInclusivelyBeforeDay(
                moment(day).startOf("day"),
                moment().startOf("day").subtract(1, "days")
              ) ||
              isInclusivelyAfterDay(
                moment(day).startOf("day"),
                moment().startOf("day").add(31, "days")
              )
            }
          />

Screenshots/Gifs
image

Kapture.2023-09-07.at.12.28.50.mp4

Desktop (please complete the following information):

  • OS: MacOS 12.6
  • Browser Arc
  • Version 1.6.0

Is the issue reproducible in Storybook?
Yes, but it's not apparent what happens under the scenes. The text remains, but the value is not stored.
https://react-dates.github.io/react-dates/?path=/story/sdp-day-props--allows-next-two-weeks-only

Additional context

We're aware this isn't necessarily a bug, but the pattern here feels incorrect. The library should allow developers to decide how they want to handle invalid inputs. Blanket removing all invalid inputs leads to some confusing and vague behaviors.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.