fix: only expose focus on Select

okta · Dec 8, 2023 · c519ee9 · c519ee9
1 parent 13aa484
commit c519ee9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 41 deletions.
diff --git a/packages/odyssey-react-mui/src/Select.tsx b/packages/odyssey-react-mui/src/Select.tsx
@@ -93,7 +93,9 @@ export type SelectProps<
   /**
    * The ref is forwarded to input element in the Select
    */
-  inputRef: React.RefObject<HTMLInputElement>;
+  inputRef: React.RefObject<{
+    focus: () => void;
+  } | null>;
 } & Pick<
   FieldComponentProps,
   | "errorMessage"
@@ -178,7 +180,12 @@ const Select = <
       const inputElement = (
         ref.current as unknown as HTMLElement
       ).querySelector("input");
-      return inputElement as HTMLInputElement;
+      if (!inputElement) {
+        return null;
+      }
+      return {
+        focus: inputElement.focus,
+      };
     },
     []
   );

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Select/Select.stories.tsx
@@ -10,8 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { useRef } from "react";
-import { Box } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
 import { Select, SelectProps } from "@okta/odyssey-react-mui";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
@@ -218,15 +216,6 @@ const storybookMeta: Meta<SelectProps<string | string[], boolean>> = {
         },
       },
     },
-    inputRef: {
-      control: null,
-      description: "The ref is forwarded to the root element.",
-      table: {
-        type: {
-          summary: "HTMLElement",
-        },
-      },
-    },
   },
   args: {
     hint: "Select your destination in the Sol system.",
@@ -406,31 +395,3 @@ export const ControlledPreselectedMultipleSelect: StoryObj<typeof Select> = {
     return <Select {...props} value={localValue} onChange={onChange} />;
   },
 };
-
-export const WithRef: StoryObj<typeof Select> = {
-  args: {
-    value: [],
-    hasMultipleChoices: true,
-  },
-  render: function C(args) {
-    const [refHtml, setRefHtml] = useState("");
-    const ref = useRef<HTMLInputElement>(null);
-
-    const handleGetRefInnerHtml = () => {
-      setRefHtml(ref.current?.outerHTML as string);
-    };
-
-    return (
-      <Box
-        component="div"
-        sx={{ display: "flex", flexFlow: "column", gap: "1rem" }}
-      >
-        <Select {...args} inputRef={ref} />
-        <Box>
-          <button onClick={handleGetRefInnerHtml}>Get ref Html</button>
-        </Box>
-        <div>Ref HTML: {refHtml}</div>
-      </Box>
-    );
-  },
-};