From bce766bcbd61b7b6e1ebf0d66e1ad290e4f3b9cf Mon Sep 17 00:00:00 2001 From: mark-tate <143323+mark-tate@users.noreply.github.com> Date: Fri, 13 Dec 2024 21:46:19 +0000 Subject: [PATCH] update un-controlled open behaviour to be disabled when read-only --- .../__e2e__/date-picker/DatePicker.single.cy.tsx | 11 ++++++++--- .../lab/src/date-picker/DatePickerOverlayProvider.tsx | 11 +++++------ 2 files changed, 13 insertions(+), 9 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 index a1e771ad29..9f807ffdeb 100644 --- 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(); + cy.findByRole("application").should("not.exist"); + }); }); adapters.forEach((adapter: SaltDateAdapter) => { @@ -483,7 +488,7 @@ describe("GIVEN a DatePicker where selectionVariant is single", () => { it("SHOULD be able to enable the overlay to open on click", () => { cy.mount( - , + , ); cy.findByRole("application").should("not.exist"); // Simulate opening the calendar on click @@ -504,7 +509,7 @@ describe("GIVEN a DatePicker where selectionVariant is single", () => { it("SHOULD be able to enable the overlay to open on keydown", () => { cy.mount( - , @@ -530,7 +535,7 @@ describe("GIVEN a DatePicker where selectionVariant is single", () => { it("SHOULD be able to enable the overlay to open on focus", () => { cy.mount( - , + , ); cy.findByRole("application").should("not.exist"); // Simulate opening the calendar on focus diff --git a/packages/lab/src/date-picker/DatePickerOverlayProvider.tsx b/packages/lab/src/date-picker/DatePickerOverlayProvider.tsx index 6a8f30cf3e..2b2e6565eb 100644 --- a/packages/lab/src/date-picker/DatePickerOverlayProvider.tsx +++ b/packages/lab/src/date-picker/DatePickerOverlayProvider.tsx @@ -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,11 @@ export const DatePickerOverlayProvider: React.FC< : [ useDismiss(floatingUIResult.context), useFocus(floatingUIResult.context, { - enabled: !!openOnFocus, + enabled: !!openOnFocus && !readOnly, }), - useKeyboard(floatingUIResult.context, { enabled: !!openOnKeyDown }), + useKeyboard(floatingUIResult.context, { enabled: !!openOnKeyDown && !readOnly }), useClick(floatingUIResult.context, { - enabled: !!openOnClick, + enabled: !!openOnClick && !readOnly, toggle: false, }), ],