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..032495cca3 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();
@@ -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(
- ,
- );
+ cy.mount();
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(
- ,
- );
+ cy.mount();
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
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({});