Date picker fix readOnly overlay (#4472)

jpmorganchase · Dec 13, 2024 · a9edf03 · a9edf03
1 parent 0a5b68b
commit a9edf03
Show file tree

Hide file tree

Showing 8 changed files with 159 additions and 23 deletions.
diff --git a/.changeset/stupid-worms-learn.md b/.changeset/stupid-worms-learn.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/lab": patch
+---
+
+Fixed DatePicker showing overlay when `readOnly`. Closes #4470.
diff --git a/packages/lab/src/__tests__/__e2e__/date-picker/DatePicker.range.cy.tsx b/packages/lab/src/__tests__/__e2e__/date-picker/DatePicker.range.cy.tsx
@@ -38,6 +38,61 @@ const {
 } = datePickerStories as any;
 
 describe("GIVEN a DatePicker where selectionVariant is single", () => {
+  describe("WHEN default state", () => {
+    beforeEach(() => {
+      const today = new Date(2024, 4, 6);
+      cy.clock(today, ["Date"]);
+      cy.setDateAdapter(adapterDateFns);
+    });
+
+    afterEach(() => {
+      cy.clock().then((clock) => clock.restore());
+    });
+
+    it("SHOULD show calendar overlay when click the calendar icon button", () => {
+      cy.mount(<Range />);
+
+      // Simulate opening the calendar
+      cy.findByRole("button", { name: "Open Calendar" }).realClick();
+      // Verify that the calendar is displayed
+      cy.findAllByRole("application").should("have.length", 2);
+    });
+
+    it("SHOULD open calendar overlay when using down arrow", () => {
+      cy.mount(<Range />);
+
+      cy.findAllByRole("textbox").eq(0).click().type("{downArrow}");
+      // Verify that the calendar is displayed
+      cy.findAllByRole("application").should("have.length", 2);
+    });
+  });
+
+  describe("WHEN readOnly", () => {
+    beforeEach(() => {
+      const today = new Date(2024, 4, 6);
+      cy.clock(today, ["Date"]);
+      cy.setDateAdapter(adapterDateFns);
+    });
+
+    afterEach(() => {
+      cy.clock().then((clock) => clock.restore());
+    });
+
+    it("SHOULD not show calendar icon button", () => {
+      cy.mount(<Range readOnly />);
+      cy.findByRole("button", { name: "Open Calendar" }).should("not.exist");
+    });
+
+    it("SHOULD not open overlay when using down arrow", () => {
+      cy.mount(<Range readOnly />);
+      cy.findAllByRole("textbox")
+        .eq(0)
+        .click()
+        .type("{downArrow}", { force: true });
+      cy.findByRole("application").should("not.exist");
+    });
+  });
+
   adapters.forEach((adapter: SaltDateAdapter<DateFrameworkType>) => {
     describe(`Tests with ${adapter.lib}`, () => {
       beforeEach(() => {

diff --git a/packages/lab/src/__tests__/__e2e__/date-picker/DatePicker.single.cy.tsx b/packages/lab/src/__tests__/__e2e__/date-picker/DatePicker.single.cy.tsx
@@ -35,9 +35,61 @@ const {
   SingleWithMinMaxDate,
   SingleWithTodayButton,
   SingleCustomFormat,
-} = datePickerStories as any;
+} = datePickerStories as any; // not using composeStories yet, will break certain test below
 
 describe("GIVEN a DatePicker where selectionVariant is single", () => {
+  describe("WHEN default state", () => {
+    beforeEach(() => {
+      const today = new Date(2024, 4, 6);
+      cy.clock(today, ["Date"]);
+      cy.setDateAdapter(adapterDateFns);
+    });
+
+    afterEach(() => {
+      cy.clock().then((clock) => clock.restore());
+    });
+
+    it("SHOULD show calendar overlay when click the calendar icon button", () => {
+      cy.mount(<Single />);
+
+      // Simulate opening the calendar
+      cy.findByRole("button", { name: "Open Calendar" }).realClick();
+      // Verify that the calendar is displayed
+      cy.findByRole("application").should("exist");
+    });
+
+    it("SHOULD open calendar overlay when using down arrow", () => {
+      cy.mount(<Single />);
+
+      cy.findByRole("textbox").click().type("{downArrow}");
+      // Verify that the calendar is displayed
+      cy.findByRole("application").should("exist");
+    });
+  });
+
+  describe("WHEN readOnly", () => {
+    beforeEach(() => {
+      const today = new Date(2024, 4, 6);
+      cy.clock(today, ["Date"]);
+      cy.setDateAdapter(adapterDateFns);
+    });
+
+    afterEach(() => {
+      cy.clock().then((clock) => clock.restore());
+    });
+
+    it("SHOULD not show calendar icon button", () => {
+      cy.mount(<Single readOnly />);
+      cy.findByRole("button", { name: "Open Calendar" }).should("not.exist");
+    });
+
+    it("SHOULD not open overlay when using down arrow", () => {
+      cy.mount(<Single readOnly />);
+      cy.findByRole("textbox").click().type("{downArrow}", { force: true });
+      cy.findByRole("application").should("not.exist");
+    });
+  });
+
   adapters.forEach((adapter: SaltDateAdapter<DateFrameworkType>) => {
     describe(`Tests with ${adapter.lib}`, () => {
       beforeEach(() => {

diff --git a/packages/lab/src/date-picker/DatePicker.tsx b/packages/lab/src/date-picker/DatePicker.tsx
@@ -124,15 +124,16 @@ export const DatePickerMain = forwardRef<HTMLDivElement, DatePickerProps<any>>(
 export const DatePicker = forwardRef(function DatePicker<
   TDate extends DateFrameworkType,
 >(props: DatePickerProps<TDate>, ref: React.Ref<HTMLDivElement>) {
-  const { open, defaultOpen, onOpen, ...rest } = props;
+  const { open, defaultOpen, onOpen, readOnly, ...rest } = props;
 
   return (
     <DatePickerOverlayProvider
       open={open}
       defaultOpen={defaultOpen}
       onOpen={onOpen}
+      readOnly={readOnly}
     >
-      <DatePickerMain {...rest} ref={ref} />
+      <DatePickerMain {...rest} readOnly={readOnly} ref={ref} />
     </DatePickerOverlayProvider>
   );
 });
diff --git a/packages/lab/src/date-picker/DatePickerOverlayProvider.tsx b/packages/lab/src/date-picker/DatePickerOverlayProvider.tsx
@@ -94,11 +94,15 @@ interface DatePickerOverlayProviderProps {
    * The content to be rendered inside the overlay provider.
    */
   children: ReactNode;
+  /**
+   * When true, shouldn't open the overlay.
+   */
+  readOnly?: boolean;
 }
 
 export const DatePickerOverlayProvider: React.FC<
   DatePickerOverlayProviderProps
-> = ({ open: openProp, defaultOpen, onOpen, children }) => {
+> = ({ open: openProp, defaultOpen, onOpen, children, readOnly }) => {
   const [open, setOpenState] = useControlled({
     controlled: openProp,
     default: Boolean(defaultOpen),
@@ -130,6 +134,10 @@ export const DatePickerOverlayProvider: React.FC<
       reason?: OpenChangeReason | undefined,
     ) => {
       if (newOpen) {
+        if (readOnly) {
+          // When not open overlay when readOnly
+          return;
+        }
         triggeringElement.current = document.activeElement as HTMLElement;
       }
       setOpenState(newOpen);
@@ -141,7 +149,7 @@ export const DatePickerOverlayProvider: React.FC<
         onDismissCallback?.current?.();
       }
     },
-    [onOpen],
+    [onOpen, readOnly],
   );
 
   const floatingUIResult = useFloatingUI({

diff --git a/packages/lab/src/date-picker/DatePickerRangeInput.tsx b/packages/lab/src/date-picker/DatePickerRangeInput.tsx
@@ -234,15 +234,17 @@ export const DatePickerRangeInput = forwardRef(function DatePickerRangeInput<
       onDateValueChange={handleDateValueChange}
       onChange={onChange}
       endAdornment={
-        <Button
-          appearance="transparent"
-          sentiment="neutral"
-          onClick={handleCalendarButton}
-          disabled={disabled}
-          aria-label="Open Calendar"
-        >
-          <CalendarIcon />
-        </Button>
+        !readOnly && (
+          <Button
+            appearance="transparent"
+            sentiment="neutral"
+            onClick={handleCalendarButton}
+            disabled={disabled}
+            aria-label="Open Calendar"
+          >
+            <CalendarIcon />
+          </Button>
+        )
       }
       format={format}
       {...rest}

diff --git a/packages/lab/src/date-picker/DatePickerSingleInput.tsx b/packages/lab/src/date-picker/DatePickerSingleInput.tsx
@@ -188,15 +188,17 @@ export const DatePickerSingleInput = forwardRef<
         onDateChange={handleDateChange}
         onDateValueChange={handleDateValueChange}
         endAdornment={
-          <Button
-            appearance="transparent"
-            sentiment="neutral"
-            onClick={handleCalendarButton}
-            disabled={disabled}
-            aria-label="Open Calendar"
-          >
-            <CalendarIcon />
-          </Button>
+          !readOnly && (
+            <Button
+              appearance="transparent"
+              sentiment="neutral"
+              onClick={handleCalendarButton}
+              disabled={disabled}
+              aria-label="Open Calendar"
+            >
+              <CalendarIcon />
+            </Button>
+          )
         }
         onKeyDown={handleOnKeyDown}
         {...rest}

diff --git a/packages/lab/stories/date-picker/date-picker.stories.tsx b/packages/lab/stories/date-picker/date-picker.stories.tsx
@@ -173,6 +173,17 @@ Range.args = {
   selectionVariant: "range",
 };
 
+export const SingleReadOnly = DatePickerSingleTemplate.bind({});
+SingleReadOnly.args = {
+  readOnly: true,
+};
+
+export const RangeReadOnly = DatePickerRangeTemplate.bind({});
+RangeReadOnly.args = {
+  readOnly: true,
+  selectionVariant: "range",
+};
+
 export const SingleControlled: StoryFn<
   DatePickerSingleProps<DateFrameworkType>
 > = ({ selectionVariant, defaultSelectedDate, ...args }) => {