From d65c1880c0f03c316b2f90211739d89361836040 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Wed, 1 Mar 2023 18:23:12 -0500
Subject: [PATCH] fix(striker-ui): pass id to input element in SelectWithLabel

---
 striker-ui/components/SelectWithLabel.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/striker-ui/components/SelectWithLabel.tsx b/striker-ui/components/SelectWithLabel.tsx
index eabda51a..00ed6e02 100644
--- a/striker-ui/components/SelectWithLabel.tsx
+++ b/striker-ui/components/SelectWithLabel.tsx
@@ -71,15 +71,20 @@ const SelectWithLabel: FC<SelectWithLabelProps> = ({
     [createCheckbox, disableItem, hideItem, id],
   );
 
-  const inputElement = useMemo(() => <OutlinedInput label={label} />, [label]);
+  const selectId = useMemo(() => `${id}-select-element`, [id]);
+
+  const inputElement = useMemo(
+    () => <OutlinedInput id={id} label={label} />,
+    [id, label],
+  );
   const labelElement = useMemo(
     () =>
       label && (
-        <OutlinedInputLabel htmlFor={id} {...inputLabelProps}>
+        <OutlinedInputLabel htmlFor={selectId} {...inputLabelProps}>
           {label}
         </OutlinedInputLabel>
       ),
-    [id, inputLabelProps, label],
+    [inputLabelProps, label, selectId],
   );
   const menuItemElements = useMemo(
     () =>
@@ -96,7 +101,7 @@ const SelectWithLabel: FC<SelectWithLabelProps> = ({
     <MUIFormControl fullWidth {...formControlProps}>
       {labelElement}
       <Select
-        id={id}
+        id={selectId}
         input={inputElement}
         multiple={selectMultiple}
         name={name}