fix: Implement Placeholder in Select Component (#165)

* select placeholder option

* placeholder setup

* placeholder tests

* setup in story

* hiding placeholder tests

* placeholder option

* clean up unused imports

src/components/form/select/Select.test.tsx

@@ -128,3 +128,100 @@ it("can be registered as a React Hook Form uncontrolled component", async () =>
     name: optionToChoose,
   });
 });
+
+it("displays a placeholder option that is chosen by default if placeholder is provided", () => {
+  const placeholder = "Select from the MANY options below!";
+  render(
+    <Select placeholder={placeholder}>
+      <option value="A">A</option>
+      <option value="B">B</option>
+    </Select>
+  );
+  const placeholderOption = screen.getByRole("option", { name: placeholder });
+  expect(placeholderOption).toBeInTheDocument();
+  const select = screen.getByRole("combobox");
+  expect(select.firstChild?.isEqualNode(placeholderOption)).toEqual(true);
+  expect(select).toHaveValue("");
+});
+
+it("does not display a placeholder option if placeholder is not provided", () => {
+  render(
+    <Select>
+      <option value="A">A</option>
+      <option value="B">B</option>
+    </Select>
+  );
+  const select = screen.getByRole("combobox");
+  const optionA = screen.getByRole("option", { name: "A" });
+  expect(select).toHaveValue("A");
+  expect(select.firstChild?.isEqualNode(optionA)).toEqual(true);
+});
+
+it("hides the placeholder option if the user chose a valid option", () => {
+  const placeholder = "Select from the MANY options below!";
+  render(
+    <Select placeholder={placeholder} hidePlaceholderAfterChange>
+      <option value="A">A</option>
+      <option value="B">B</option>
+    </Select>
+  );
+  const placeholderOption = screen.getByRole("option", { name: placeholder });
+  expect(placeholderOption).toBeInTheDocument();
+  expect(placeholderOption).toBeVisible();
+  expect(screen.getAllByRole("option")).toHaveLength(3);
+  const select = screen.getByRole("combobox");
+  expect(select.firstChild?.isEqualNode(placeholderOption)).toEqual(true);
+  expect(select).toHaveValue("");
+  user.selectOptions(select, ["A"]);
+  const removedPlaceholderOption = screen.queryByRole("option", {
+    name: placeholder,
+  });
+  expect(removedPlaceholderOption).toBeNull();
+  expect(screen.getAllByRole("option")).toHaveLength(2);
+});
+
+it("does not hide the placeholder option if the user chose a valid option but hiding was disabled", () => {
+  const placeholder = "Select from the MANY options below!";
+  render(
+    <Select placeholder={placeholder} hidePlaceholderAfterChange={false}>
+      <option value="A">A</option>
+      <option value="B">B</option>
+    </Select>
+  );
+  const placeholderOption = screen.getByRole("option", { name: placeholder });
+  expect(placeholderOption).toBeInTheDocument();
+  expect(placeholderOption).toBeVisible();
+  expect(screen.getAllByRole("option")).toHaveLength(3);
+  const select = screen.getByRole("combobox");
+  expect(select.firstChild?.isEqualNode(placeholderOption)).toEqual(true);
+  expect(select).toHaveValue("");
+  user.selectOptions(select, ["A"]);
+  const removedPlaceholderOption = screen.queryByRole("option", {
+    name: placeholder,
+  });
+  expect(removedPlaceholderOption).not.toBeNull();
+  expect(screen.getAllByRole("option")).toHaveLength(3);
+});
+
+it("does not hide the placeholder option if the user chose a valid option by default", () => {
+  const placeholder = "Select from the MANY options below!";
+  render(
+    <Select placeholder={placeholder}>
+      <option value="A">A</option>
+      <option value="B">B</option>
+    </Select>
+  );
+  const placeholderOption = screen.getByRole("option", { name: placeholder });
+  expect(placeholderOption).toBeInTheDocument();
+  expect(placeholderOption).toBeVisible();
+  expect(screen.getAllByRole("option")).toHaveLength(3);
+  const select = screen.getByRole("combobox");
+  expect(select.firstChild?.isEqualNode(placeholderOption)).toEqual(true);
+  expect(select).toHaveValue("");
+  user.selectOptions(select, ["A"]);
+  const removedPlaceholderOption = screen.queryByRole("option", {
+    name: placeholder,
+  });
+  expect(removedPlaceholderOption).not.toBeNull();
+  expect(screen.getAllByRole("option")).toHaveLength(3);
+});

src/components/form/select/Select.tsx

@@ -1,4 +1,4 @@
-import { SelectHTMLAttributes } from "react";
+import { SelectHTMLAttributes, useState } from "react";
 import { UseFormRegisterReturn } from "react-hook-form";
 import { CommonFormInputAttributes, Size } from "../../../types";
 import {
@@ -16,6 +16,7 @@ export type SelectProps = HTMLSelectAttributes &
   CommonFormInputAttributes & {
     size?: Size;
     register?: UseFormRegisterReturn;
+    hidePlaceholderAfterChange?: boolean;
   };
 
 const classNameMap: ClassNameTransformMap<SelectProps> = new Map([
@@ -32,14 +33,29 @@ export const Select = ({
   describedBy,
   register,
   invalid = false,
+  placeholder,
+  hidePlaceholderAfterChange,
   ...props
 }: SelectProps): JSX.Element => {
+  const [interactedWith, setInteractedWith] = useState(false);
   const className = createClassNameFromProps(
     classNameMap,
     { color, size, multiple } as Partial<SelectProps>,
     ["select"]
   );
 
+  const onInput = () => {
+    if (hidePlaceholderAfterChange) {
+      setInteractedWith(true);
+    }
+  };
+
+  const placeholderOption = placeholder && (
+    <option disabled selected value="" hidden={interactedWith}>
+      {placeholder}
+    </option>
+  );
+
   return (
     <div className={className}>
       <select
@@ -48,7 +64,9 @@ export const Select = ({
         {...props}
         aria-invalid={invalid}
         aria-describedby={describedBy}
+        onInput={onInput}
       >
+        {placeholderOption}
         {children}
       </select>
     </div>

src/stories/form/Select.stories.tsx

@@ -25,6 +25,11 @@ export default {
         type: "boolean",
       },
     },
+    placeholder: {
+      control: {
+        type: "text",
+      },
+    },
   },
 } as Meta<SelectProps>;