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()