remove openOnFocus

jpmorganchase · Dec 20, 2024 · 1ed601d · 1ed601d
1 parent 2b97d3d
commit 1ed601d
Show file tree

Hide file tree

Showing 8 changed files with 2 additions and 57 deletions.
diff --git a/.changeset/serious-kings-decide.md b/.changeset/serious-kings-decide.md
@@ -4,6 +4,6 @@
 
 enabled uncontrolled/un-controlled open behaviour for `DatePicker`
 
-- added `openOnClick`, `openOnKeyDown` and `openOnFocus` props to `DatePicker`.
+- added `openOnClick` and `openOnKeyDown` props to `DatePicker`.
 - revise the controlled behaviour of the `open` prop on `DatePickerOverlay`.
 - add examples for controlled and uncontrolled behaviour.
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
@@ -93,18 +93,6 @@ describe("GIVEN a DatePicker where selectionVariant is single", () => {
       cy.realPress("ArrowDown");
       cy.findAllByRole("application").should("have.length", 2);
     });
-
-    it("SHOULD be able to enable the overlay to open on focus", () => {
-      cy.mount(<Range openOnFocus />);
-      cy.findByRole("application").should("not.exist");
-      // Simulate opening the calendar on focus
-      cy.findByLabelText("Start date").focus();
-      cy.findAllByRole("application").should("have.length", 2);
-      cy.document().find("body").realClick();
-      cy.findByRole("application").should("not.exist");
-      cy.findByLabelText("End date").focus();
-      cy.findAllByRole("application").should("have.length", 2);
-    });
   });
 
   describe("WHEN readOnly", () => {

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
@@ -85,14 +85,6 @@ describe("GIVEN a DatePicker where selectionVariant is single", () => {
       cy.findByRole("application").should("exist");
     });
 
-    it("SHOULD be able to enable the overlay to open on focus", () => {
-      cy.mount(<Single openOnFocus />);
-      cy.findByRole("application").should("not.exist");
-      // Simulate opening the calendar on focus
-      cy.document().find("input").focus();
-      cy.findByRole("application").should("exist");
-    });
-
     it("SHOULD be able to control the overlay open state", () => {
       cy.mount(<ControlledOpen />);
       cy.findByRole("application").should("not.exist");

diff --git a/packages/lab/src/date-picker/DatePicker.tsx b/packages/lab/src/date-picker/DatePicker.tsx
@@ -21,8 +21,6 @@ export interface DatePickerBaseProps {
   children?: ReactNode;
   /** the open/close state of the overlay. The open/close state will be controlled when this prop is provided. */
   open?: boolean;
-  /** When `open` is uncontrolled, set this to `true` to open on focus */
-  openOnFocus?: boolean;
   /** When `open` is uncontrolled, set this to `true` to open on click */
   openOnClick?: boolean;
   /** When `open` is uncontrolled, set this to `true` to open on arrow key down */
@@ -134,7 +132,6 @@ export const DatePicker = forwardRef(function DatePicker<
     defaultOpen,
     open,
     openOnClick,
-    openOnFocus,
     openOnKeyDown,
     onOpen,
     readOnly,
@@ -146,7 +143,6 @@ export const DatePicker = forwardRef(function DatePicker<
       defaultOpen={defaultOpen}
       open={open}
       openOnClick={openOnClick}
-      openOnFocus={openOnFocus}
       openOnKeyDown={openOnKeyDown}
       onOpen={onOpen}
       readOnly={readOnly}

diff --git a/packages/lab/src/date-picker/DatePickerOverlayProvider.tsx b/packages/lab/src/date-picker/DatePickerOverlayProvider.tsx
@@ -5,7 +5,6 @@ import {
   flip,
   useClick,
   useDismiss,
-  useFocus,
   useInteractions,
 } from "@floating-ui/react";
 import { createContext, useControlled, useFloatingUI } from "@salt-ds/core";
@@ -85,10 +84,6 @@ interface DatePickerOverlayProviderProps {
    * If `true`, the overlay is open.
    */
   open?: boolean;
-  /**
-   * When `open` is uncontrolled, set this to `true` to open on focus
-   */
-  openOnFocus?: boolean;
   /**
    * When `open` is uncontrolled, set this to `true` to open on click
    */
@@ -125,7 +120,6 @@ export const DatePickerOverlayProvider: React.FC<
 > = ({
   open: openProp,
   openOnClick,
-  openOnFocus,
   openOnKeyDown = true,
   defaultOpen,
   onOpen,
@@ -190,9 +184,6 @@ export const DatePickerOverlayProvider: React.FC<
       ? interactions(floatingUIResult.context)
       : [
           useDismiss(floatingUIResult.context),
-          useFocus(floatingUIResult.context, {
-            enabled: !!openOnFocus && !readOnly,
-          }),
           useKeyboard(floatingUIResult.context, {
             enabled: !!openOnKeyDown && !readOnly,
           }),

diff --git a/packages/lab/stories/date-picker/date-picker.stories.tsx b/packages/lab/stories/date-picker/date-picker.stories.tsx
@@ -2700,19 +2700,9 @@ export const UncontrolledOpen: StoryFn<
 > = ({ selectionVariant, defaultSelectedDate, ...args }) => {
   const [openOnClick, setOpenOnClick] = useState(false);
   const [openOnKeyDown, setOpenOnKeyDown] = useState(false);
-  const [openOnFocus, setOpenOnFocus] = useState(false);
   return (
     <StackLayout style={{ width: "400px" }}>
       <FlexLayout>
-        <ToggleButton
-          aria-label={"open on focus"}
-          value={openOnFocus ? "false" : "true"}
-          onChange={(event) =>
-            setOpenOnFocus(event.currentTarget.value === "true")
-          }
-        >
-          Open On Focus
-        </ToggleButton>
         <ToggleButton
           aria-label={"open on click"}
           value={openOnClick ? "false" : "true"}
@@ -2736,7 +2726,6 @@ export const UncontrolledOpen: StoryFn<
         selectionVariant={"single"}
         openOnClick={openOnClick}
         openOnKeyDown={openOnKeyDown}
-        openOnFocus={openOnFocus}
         {...args}
         defaultSelectedDate={defaultSelectedDate}
       >

diff --git a/site/docs/components/date-picker/examples.mdx b/site/docs/components/date-picker/examples.mdx
@@ -174,7 +174,7 @@ A `DatePicker` component with a border provides a visually distinct area for sel
 
 ## Uncontrolled open
 
-By default, the overlay's open state is uncontrolled and opens only when the calendar button is used. However, it can also be configured to open using the `openOnClick`, `openOnKeyDown` and `openOnFocus` props.
+By default, the overlay's open state is uncontrolled and opens only when the calendar button is used. However, it can also be configured to open using the `openOnClick` and `openOnKeyDown`props.
 
 </LivePreview>
 

diff --git a/site/src/examples/date-picker/UncontrolledOpen.tsx b/site/src/examples/date-picker/UncontrolledOpen.tsx
@@ -11,19 +11,9 @@ import { type ReactElement, useState } from "react";
 export const UncontrolledOpen = (): ReactElement => {
   const [openOnClick, setOpenOnClick] = useState(false);
   const [openOnKeyDown, setOpenOnKeyDown] = useState(false);
-  const [openOnFocus, setOpenOnFocus] = useState(false);
   return (
     <StackLayout>
       <FlexLayout>
-        <ToggleButton
-          aria-label={"open on focus"}
-          value={openOnFocus ? "false" : "true"}
-          onChange={(event) =>
-            setOpenOnFocus(event.currentTarget.value === "true")
-          }
-        >
-          Open On Focus
-        </ToggleButton>
         <ToggleButton
           aria-label={"open on click"}
           value={openOnClick ? "false" : "true"}
@@ -47,7 +37,6 @@ export const UncontrolledOpen = (): ReactElement => {
         selectionVariant={"single"}
         openOnClick={openOnClick}
         openOnKeyDown={openOnKeyDown}
-        openOnFocus={openOnFocus}
       >
         <DatePickerTrigger>
           <DatePickerSingleInput />