fix: Datepicker closeOnSelect prop (carbon-design-system#15431)

* fix(datepicker): adding closeOnSelect condition * test: datepicker closeOnSelect test
guidari · Jan 11, 2024 · 58c87ff · 58c87ff
1 parent 8b4ba09
commit 58c87ff
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 2 deletions.
diff --git 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 (
+        <DatePicker
+          datePickerType="single"
+          value={date}
+          closeOnSelect={false}
+          minDate="11/25/2023"
+          maxDate="11/28/2023"
+          onChange={(value) => {
+            setDate(value);
+          }}>
+          <DatePickerInput
+            placeholder="mm/dd/yyyy"
+            labelText="Date Picker label"
+            id="date-picker-simple"
+          />
+        </DatePicker>
+      );
+    };
+    render(<DatePickerExample />);
+    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
@@ -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()