diff --git a/src/date-range-picker/dropdown.tsx b/src/date-range-picker/dropdown.tsx index 521dcac98e..9c530ef153 100644 --- a/src/date-range-picker/dropdown.tsx +++ b/src/date-range-picker/dropdown.tsx @@ -4,6 +4,7 @@ import React, { useEffect, useRef, useState } from 'react'; import clsx from 'clsx'; +import { AlertProps } from '../alert/interfaces'; import InternalAlert from '../alert/internal'; import InternalBox from '../box/internal'; import { ButtonProps } from '../button/interfaces'; @@ -111,6 +112,7 @@ export function DateRangePickerDropdown({ const scrollableContainerRef = useRef(null); const applyButtonRef = useRef(null); + const alertRef = useRef(null); const [applyClicked, setApplyClicked] = useState(false); @@ -167,6 +169,12 @@ export function DateRangePickerDropdown({ timeOffset, ]); + useEffect(() => { + if (applyClicked && !validationResult.valid) { + alertRef.current?.focus(); + } + }, [applyClicked, validationResult]); + useEffect(() => scrollableContainerRef.current?.focus(), [scrollableContainerRef]); return ( @@ -241,6 +249,7 @@ export function DateRangePickerDropdown({ {!validationResult.valid && ( <>