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..d7c035d2ef 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) => { @@ -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( - , - ); + cy.mount(); cy.findByRole("application").should("not.exist"); // Simulate opening the calendar on click cy.document().find("input").realClick(); @@ -503,12 +506,7 @@ describe("GIVEN a DatePicker where selectionVariant is single", () => { }); it("SHOULD be able to enable the overlay to open on keydown", () => { - cy.mount( - , - ); + cy.mount(); cy.findByRole("application").should("not.exist"); // Simulate opening the calendar on arrow down cy.document().find("input").realClick(); @@ -529,9 +527,7 @@ describe("GIVEN a DatePicker where selectionVariant is single", () => { }); it("SHOULD be able to enable the overlay to open on focus", () => { - cy.mount( - , - ); + cy.mount(); cy.findByRole("application").should("not.exist"); // Simulate opening the calendar on focus cy.document().find("input").focus(); diff --git a/packages/lab/src/date-picker/DatePickerOverlayProvider.tsx b/packages/lab/src/date-picker/DatePickerOverlayProvider.tsx index 6a8f30cf3e..3ca3623b84 100644 --- 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; + interactions?: (context: FloatingContext) => Array; /** * 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 index 81b220b40b..af025a9cb6 100644 --- 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({});