diff --git a/packages/react/src/components/DatePicker/DatePicker-test.js b/packages/react/src/components/DatePicker/DatePicker-test.js index e897126c18fe..9468aa2dc67a 100644 --- a/packages/react/src/components/DatePicker/DatePicker-test.js +++ b/packages/react/src/components/DatePicker/DatePicker-test.js @@ -317,6 +317,46 @@ describe('Single date picker', () => { await userEvent.click(screen.getByText('clear')); expect(screen.getByLabelText('Date Picker label')).toHaveValue(''); }); + + it('should respect closeOnSelect prop', async () => { + const DatePickerExample = () => { + const [date, setDate] = useState(); + return ( + { + setDate(value); + }}> + + + ); + }; + render(); + const input = screen.getByLabelText('Date Picker label'); + expect(screen.getByRole('application')).not.toHaveClass('open'); + + await userEvent.click(input); + expect(screen.getByRole('application')).toHaveClass('open'); + + // eslint-disable-next-line testing-library/no-node-access + const belowMinDate = document.querySelector( + '[aria-label="November 26, 2023"]' + ); + await userEvent.click(belowMinDate); + + expect(screen.getByLabelText('Date Picker label')).toHaveValue( + '11/26/2023' + ); + expect(screen.getByRole('application')).toHaveClass('open'); + }); }); describe('Date picker with locale', () => { diff --git a/packages/react/src/components/DatePicker/DatePicker.tsx b/packages/react/src/components/DatePicker/DatePicker.tsx index 2f38791e8f63..0dc8e1f096c3 100644 --- a/packages/react/src/components/DatePicker/DatePicker.tsx +++ b/packages/react/src/components/DatePicker/DatePicker.tsx @@ -644,7 +644,7 @@ const DatePicker = React.forwardRef(function DatePicker( } function handleOnChange(event) { - if (datePickerType == 'single') { + if (datePickerType == 'single' && closeOnSelect) { calendar.calendarContainer.classList.remove('open'); } @@ -720,7 +720,15 @@ const DatePicker = React.forwardRef(function DatePicker( end.removeEventListener('change', handleOnChange); } }; - }, [savedOnChange, savedOnClose, savedOnOpen, readOnly, hasInput]); //eslint-disable-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ + savedOnChange, + savedOnClose, + savedOnOpen, + readOnly, + closeOnSelect, + hasInput, + ]); // this hook allows consumers to access the flatpickr calendar // instance for cases where functions like open() or close()