From 94d7d6b6b2ff7dcbe670aed819e7e54c6a8067d0 Mon Sep 17 00:00:00 2001
From: kaiweike <kaiweike.tw@gmail.com>
Date: Tue, 30 Jul 2024 14:42:05 +0800
Subject: [PATCH] fix(Select): Add support for required attribute

---
 src/components/Select/Select.stories.tsx | 46 ++++++++++++++++++++++++
 src/components/Select/Select.test.tsx    | 37 +++++++++++++++++--
 src/components/Select/Select.tsx         |  1 +
 3 files changed, 82 insertions(+), 2 deletions(-)

diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 69842093e..0db08311b 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -49,6 +49,12 @@ const meta: Meta<typeof Select> = {
         disable: true,
       },
     },
+
+    required: {
+      control: {
+        type: "boolean",
+      },
+    },
   },
 };
 
@@ -119,3 +125,43 @@ export const SelectMultiple: Story = {
 
   name: "Select multiple",
 };
+
+export const RequiredSelect: Story = {
+  args: {
+    required: true,
+  },
+
+  render: (args) => (
+    <form>
+      <Select
+        name="exampleSelectRequired"
+        id="exampleSelectRequired"
+        options={[
+          {
+            value: "",
+            disabled: true,
+            label: "Select an option",
+          },
+          {
+            value: "1",
+            label: "Cosmic Cuttlefish",
+          },
+          {
+            value: "2",
+            label: "Bionic Beaver",
+          },
+          {
+            value: "3",
+            label: "Xenial Xerus",
+          },
+        ]}
+        label="Ubuntu releases (required)"
+        required={args.required}
+        defaultValue=""
+      />
+      <button type="submit">Submit</button>
+    </form>
+  ),
+
+  name: "Select with required",
+};
diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
index 0d11cee02..14e10a5a4 100644
--- a/src/components/Select/Select.test.tsx
+++ b/src/components/Select/Select.test.tsx
@@ -15,7 +15,7 @@ describe("Select", () => {
           { value: "3", label: "Xenial Xerus" },
         ]}
         wrapperClassName="select"
-      />
+      />,
     );
     expect(screen.getByRole("combobox")).toMatchSnapshot();
   });
@@ -30,7 +30,7 @@ describe("Select", () => {
     render(<Select options={[]} onChange={onChangeMock} />);
     fireEvent.change(screen.getByRole("combobox"), event);
     expect(onChangeMock.mock.calls[0][0].target).toBe(
-      screen.getByRole("combobox")
+      screen.getByRole("combobox"),
     );
   });
 
@@ -63,4 +63,37 @@ describe("Select", () => {
     render(<Select help={help} />);
     expect(screen.getByRole("combobox")).toHaveAccessibleDescription(help);
   });
+
+  it("renders with required attribute", () => {
+    render(
+      <Select
+        id="test-required"
+        options={[
+          { value: "", disabled: true, label: "Select an option" },
+          { value: "1", label: "Cosmic Cuttlefish" },
+          { value: "2", label: "Bionic Beaver" },
+          { value: "3", label: "Xenial Xerus" },
+        ]}
+        required
+      />,
+    );
+    const select = screen.getByRole("combobox");
+    expect(select).toBeRequired();
+  });
+
+  it("renders without required attribute when not set", () => {
+    render(
+      <Select
+        id="test-not-required"
+        options={[
+          { value: "", disabled: true, label: "Select an option" },
+          { value: "1", label: "Cosmic Cuttlefish" },
+          { value: "2", label: "Bionic Beaver" },
+          { value: "3", label: "Xenial Xerus" },
+        ]}
+      />,
+    );
+    const select = screen.getByRole("combobox");
+    expect(select).not.toBeRequired();
+  });
 });
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index ac6157690..f5af96337 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -146,6 +146,7 @@ const Select = ({
         id={selectId}
         onChange={(evt) => onChange && onChange(evt)}
         ref={selectRef}
+        required={required}
         {...selectProps}
       >
         {generateOptions(options)}