update un-controlled open behaviour to be disabled when read-only

jpmorganchase · Dec 20, 2024 · 57c3dff · 57c3dff
1 parent a0ff4dc
commit 57c3dff
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 29 deletions.
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
@@ -90,6 +90,11 @@ describe("GIVEN a DatePicker where selectionVariant is single", () => {
       cy.findByRole("textbox").click().type("{downArrow}", { force: true });
       cy.findByRole("application").should("not.exist");
     });
+
+    it("SHOULD not open overlay if defaultOpen is set", () => {
+      cy.mount(<Single readOnly defaultOpen />);
+      cy.findByRole("application").should("not.exist");
+    });
   });
 
   adapters.forEach((adapter: SaltDateAdapter<DateFrameworkType>) => {
@@ -482,9 +487,7 @@ describe("GIVEN a DatePicker where selectionVariant is single", () => {
         });
 
         it("SHOULD be able to enable the overlay to open on click", () => {
-          cy.mount(
-            <UncontrolledOpen openOnClick defaultSelectedDate={initialDate} />,
-          );
+          cy.mount(<Single openOnClick defaultSelectedDate={initialDate} />);
           cy.findByRole("application").should("not.exist");
           // Simulate opening the calendar on click
           cy.document().find("input").realClick();
@@ -497,18 +500,14 @@ describe("GIVEN a DatePicker where selectionVariant is single", () => {
             name: adapter.format(updatedDate, "DD MMMM YYYY"),
           }).realClick();
           cy.findByRole("application").should("not.exist");
-          cy.document()
-            .find("input")
-            .should("have.value", updatedFormattedDateValue);
+          cy.findByRole("textbox").should(
+            "have.value",
+            updatedFormattedDateValue,
+          );
         });
 
         it("SHOULD be able to enable the overlay to open on keydown", () => {
-          cy.mount(
-            <UncontrolledOpen
-              openOnKeyDown
-              defaultSelectedDate={initialDate}
-            />,
-          );
+          cy.mount(<Single openOnKeyDown defaultSelectedDate={initialDate} />);
           cy.findByRole("application").should("not.exist");
           // Simulate opening the calendar on arrow down
           cy.document().find("input").realClick();
@@ -523,15 +522,14 @@ describe("GIVEN a DatePicker where selectionVariant is single", () => {
             name: adapter.format(updatedDate, "DD MMMM YYYY"),
           }).realClick();
           cy.findByRole("application").should("not.exist");
-          cy.document()
-            .find("input")
-            .should("have.value", updatedFormattedDateValue);
+          cy.findByRole("textbox").should(
+            "have.value",
+            updatedFormattedDateValue,
+          );
         });
 
         it("SHOULD be able to enable the overlay to open on focus", () => {
-          cy.mount(
-            <UncontrolledOpen openOnFocus defaultSelectedDate={initialDate} />,
-          );
+          cy.mount(<Single openOnFocus defaultSelectedDate={initialDate} />);
           cy.findByRole("application").should("not.exist");
           // Simulate opening the calendar on focus
           cy.document().find("input").focus();
@@ -544,9 +542,10 @@ describe("GIVEN a DatePicker where selectionVariant is single", () => {
             name: adapter.format(updatedDate, "DD MMMM YYYY"),
           }).realClick();
           cy.findByRole("application").should("not.exist");
-          cy.document()
-            .find("input")
-            .should("have.value", updatedFormattedDateValue);
+          cy.findByRole("textbox").should(
+            "have.value",
+            updatedFormattedDateValue,
+          );
         });
       });
 

diff --git a/packages/lab/src/date-picker/DatePickerOverlayProvider.tsx b/packages/lab/src/date-picker/DatePickerOverlayProvider.tsx
@@ -113,7 +113,7 @@ interface DatePickerOverlayProviderProps {
   /**
    * A factory method to create a set of interaction, if provided overrides the default interactions
    */
-  interactions?: (context: FloatingContext) => Array<ElementProps | void>;
+  interactions?: (context: FloatingContext) => Array<ElementProps>;
   /**
    * When true, shouldn't open the overlay.
    */
@@ -126,7 +126,7 @@ export const DatePickerOverlayProvider: React.FC<
   open: openProp,
   openOnClick,
   openOnFocus,
-  openOnKeyDown,
+  openOnKeyDown = true,
   defaultOpen,
   onOpen,
   children,
@@ -135,7 +135,7 @@ export const DatePickerOverlayProvider: React.FC<
 }) => {
   const [open, setOpenState, isOpenControlled] = useControlled({
     controlled: openProp,
-    default: Boolean(defaultOpen),
+    default: readOnly ? false : Boolean(defaultOpen),
     name: "DatePicker",
     state: "openDatePickerOverlay",
   });
@@ -146,7 +146,6 @@ export const DatePickerOverlayProvider: React.FC<
     (newOpen: boolean, _event?: Event, reason?: OpenChangeReason) => {
       if (newOpen) {
         if (readOnly) {
-          // When not open overlay when readOnly
           return;
         }
         triggeringElement.current = document.activeElement as HTMLElement;
@@ -192,11 +191,13 @@ export const DatePickerOverlayProvider: React.FC<
       : [
           useDismiss(floatingUIResult.context),
           useFocus(floatingUIResult.context, {
-            enabled: !!openOnFocus,
+            enabled: !!openOnFocus && !readOnly,
+          }),
+          useKeyboard(floatingUIResult.context, {
+            enabled: !!openOnKeyDown && !readOnly,
           }),
-          useKeyboard(floatingUIResult.context, { enabled: !!openOnKeyDown }),
           useClick(floatingUIResult.context, {
-            enabled: !!openOnClick,
+            enabled: !!openOnClick && !readOnly,
             toggle: false,
           }),
         ],

diff --git a/packages/lab/stories/date-picker/date-picker.stories.tsx b/packages/lab/stories/date-picker/date-picker.stories.tsx
@@ -177,7 +177,7 @@ Range.args = {
 
 export const SingleReadOnly = DatePickerSingleTemplate.bind({});
 SingleReadOnly.args = {
-  readOnly: true
+  readOnly: true,
 };
 
 export const RangeReadOnly = DatePickerRangeTemplate.bind({});