fix(Radio/Checkbox): functionality issue incase there are multiple Ra…

…dio buttons & checkboxes (#29) * fix(Radio): functionality issue incase there are multiple sets of radio buttons * fix(Radio/Checkbox): functionality issue incase there are multiple Radio buttons & checkboxes
goto · Mar 6, 2024 · 5f674d1 · 5f674d1
1 parent 7895765
commit 5f674d1
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/packages/apsara-ui/src/Checkbox/Checkbox.tsx b/packages/apsara-ui/src/Checkbox/Checkbox.tsx
@@ -1,6 +1,7 @@
 import { CheckIcon } from "@radix-ui/react-icons";
 import React, { useEffect, useState } from "react";
 import { CheckboxWrapper, CheckboxGroupWrapper, StyledCheckbox, StyledIndicator } from "./Checkbox.styles";
+import { generateRandomId } from "../helper";
 
 type CheckboxProps = {
     defaultChecked?: boolean;
@@ -25,6 +26,7 @@ type CheckboxGroupProps = {
     orientation?: "horizontal" | "vertical";
     name?: string;
     options?: CheckboxProps[];
+    id?: string;
 };
 
 const Checkbox = ({
@@ -37,7 +39,7 @@ const Checkbox = ({
     value,
     label,
     style,
-    id = "c1",
+    id = generateRandomId(),
 }: CheckboxProps) => {
     const [isChecked, setIsChecked] = useState<boolean | "indeterminate">(checked || defaultChecked || false);
 
@@ -78,6 +80,7 @@ const CheckboxGroup = ({
     options,
     onChange,
     orientation = "horizontal",
+    id = generateRandomId(),
     ...props
 }: CheckboxGroupProps) => {
     const [selectedValues, setSelectedValues] = useState(defaultValue || value || []);
@@ -102,12 +105,12 @@ const CheckboxGroup = ({
                                 setSelectedValues(newSelectedValues);
                                 onChange && onChange(newSelectedValues);
                             }}
-                            id={`${option.value}${index}`}
+                            id={`${id}${option.value}${index}`}
                             checked={selectedValues.includes(option.value || "")}
                             value={option.value}
                             {...props}
                         />
-                        <label className="checkbox_label" htmlFor={`${option.value}${index}`}>
+                        <label className="checkbox_label" htmlFor={`${id}${option.value}${index}`}>
                             {option.label}
                         </label>
                     </div>

diff --git a/packages/apsara-ui/src/Radio/Radio.tsx b/packages/apsara-ui/src/Radio/Radio.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { RadioGroup, StyledRadioItem, StyledIndicator, Label, Flex, StyledRadioButton } from "./Radio.styles";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { generateRandomId } from "../helper";
 
 type RadioItem = {
     label?: string;
@@ -35,9 +36,20 @@ export type RadioProps = {
     style?: React.CSSProperties;
     itemStyle?: styleProps;
     children?: React.ReactNode;
+    id?: string;
 };
 
-const Radio = ({ defaultValue, value, items, onChange, required, orientation, dir, ...props }: RadioProps) => {
+const Radio = ({
+    defaultValue,
+    value,
+    items,
+    onChange,
+    required,
+    orientation,
+    dir,
+    id = generateRandomId(),
+    ...props
+}: RadioProps) => {
     return (
         <RadioGroup
             defaultValue={defaultValue}
@@ -58,11 +70,11 @@ const Radio = ({ defaultValue, value, items, onChange, required, orientation, di
                             disabled={item.disabled}
                             required={item.required}
                             {...props.itemStyle}
-                            id={i.toString()}
+                            id={`${id}${item.value}${i}`}
                         >
                             <StyledIndicator />
                         </StyledRadioItem>
-                        <Label dir={dir} htmlFor={i.toString()}>
+                        <Label dir={dir} htmlFor={`${id}${item.value}${i}`}>
                             {item.label}
                         </Label>
                     </Flex>

diff --git a/packages/apsara-ui/src/helper/index.tsx b/packages/apsara-ui/src/helper/index.tsx
@@ -0,0 +1,5 @@
+export const generateRandomId = () => {
+    const randomChars = Math.random().toString(36).substring(2, 10);
+    const timestamp = Date.now().toString(36);
+    return randomChars + timestamp;
+};