Cannot Access isInvalid Prop from DateRangePicker onChange Handler

[jeremyfenech]

Provide a general summary of the issue here

I'm trying to validate a date range selection using the isInvalid prop inside the onChange callback of the DateRangePicker. However, isInvalid does not seem to be accessible there. I need to conditionally run logic based on whether the selection is valid.

Is there a correct way to do this behaviour? I must not be the first one to want to check for validity before using the value in the onChange.

🤔 Expected Behavior?

isInvalid should be available inside the onChange handler or via another mechanism during date selection.

😯 Current Behavior

Can only access the isInvalid prop from children of the DateRangePicker element.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

import { parseDate } from "@internationalized/date"
import { CalendarIcon } from "lucide-react"

import { Button } from "@/registry/default/ui/button"
import {
  CalendarCell,
  CalendarGrid,
  CalendarGridBody,
  CalendarGridHeader,
  CalendarHeaderCell,
  CalendarHeading,
  RangeCalendar,
} from "@/registry/default/ui/calendar"
import {
  DatePickerContent,
  DateRangePicker,
} from "@/registry/default/ui/date-picker"
import { DateInput } from "@/registry/default/ui/datefield"
import { FieldGroup, Label } from "@/registry/default/ui/field"

export default function DateRangePickerDemo() {
  return (
    <DateRangePicker
      className="min-w-[320px] space-y-1"
      onChange={() => {
        console.log("Check validity here")
      }}
      maxValue={parseDate("2023-10-01")} //Should trigger validation
    >
      {(props) => {
        console.log("isInvalid", props.isInvalid)
        return (
          <>
            <Label>Date range</Label>
            <FieldGroup>
              <DateInput variant="ghost" slot={"start"} />
              <span aria-hidden className="px-2 text-sm text-muted-foreground">
                -
              </span>
              <DateInput className="flex-1" variant="ghost" slot={"end"} />

              <Button
                variant="ghost"
                size="icon"
                className="mr-1 size-6 data-[focus-visible]:ring-offset-0"
              >
                <CalendarIcon aria-hidden className="size-4" />
              </Button>
            </FieldGroup>
            <DatePickerContent>
              <RangeCalendar>
                <CalendarHeading />
                <CalendarGrid>
                  <CalendarGridHeader>
                    {(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>}
                  </CalendarGridHeader>
                  <CalendarGridBody>
                    {(date) => <CalendarCell date={date} />}
                  </CalendarGridBody>
                </CalendarGrid>
              </RangeCalendar>
            </DatePickerContent>
          </>
        )
      }}
    </DateRangePicker>
  )
}

Version

"react-aria-components": "^1.6.0",

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

Would validate work for your use case?

[jeremyfenech]

@LFDanLu I am not looking for custom validation, more so a way to only call the onChange with a valid date range. The component does validation (i.e max, min, end >= start, etc) already, but there seems to be no proper way to utilise this in the onChange caller

[LFDanLu]

Is your use case specifically to prevent your controlled date from updating to an invalid date or to not call some callback in response to a date change? We could possible offer the invalid state in the onChange handler but that would be inconsistent with the rest of the fields that also have onChange, so we'd like to figure out if there is an alternative path or if this should be updated else where and/or how much information should be available to onChange other than the validation state.

[jeremyfenech]

My main goal when opening this issue was to be able to use a callback from the onChange which assumes a valid date range. The controlled date updating would not be prevented as that would cause the value to not update of course.

What I am after is being able to call a function with a valid date range. So this could also be an onValidated function addition or something of the sorts.

I have since managed to create a somewhat functional version of what I am after by using the react-stately function useDatePickerState, through which I am able to access the isInvalid prop. However this also seems inconsistent at times and I am still experimenting with it in my environment.

[jeremyfenech]

@LFDanLu I have actually managed quite well using the useDateRangePickerState(props);, then creating a custom prop in my date range picker to call when a change is valid such as:

  useEffect(() => {
    if (value?.start && value?.end && !state.isInvalid) {
      onValidatedChange?.(value);
    }
  }, [onValidatedChange, value, state.isInvalid]);

Feel free to close the issue if you guys do not see the need to carry out any updates to support this natively. It would be nice but ultimately this does work.

[LFDanLu]

I'm glad you found a workaround! I'll still bring this use case up with the team once we are finished with the upcoming release since IMO it would be nice not to have to drop down to the hooks level for this. If have any extra specific details about your use case that you can share, that would be helpful

[jeremyfenech]

@LFDanLu Thank you very much for the support and consideration. I've built a quick demo outlining my basic use case which you and your team might find useful if you do pursue this.

Note how the valid range only updates when the dates are less than the max and the end is after the start.

This is useful for us in a case were we only want to query APIs with valid date ranges.

Do let me know if you need more information!

https://github.com/jeremyfenech/date-picker-demo

Both fields update (valid date range)

Valid does not update (invalid date range - end is less than start)

[LFDanLu]

Talked with the team, it will most likely not be in onChange due to the nature of when validation is actually triggered, but we are open to perhaps have a separate callback that fires when the validation state updates, would that be sufficient?

[jeremyfenech]

Yes that would be perfectly sufficient. My current workaround is also a separate callback and it tackles the problem just fine.