fix(radio-group, checkbox-group): add index to option keys

cft-group · Dec 24, 2020 · 3b8f517 · 3b8f517
1 parent 66d4d56
commit 3b8f517
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 6 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -31,6 +31,7 @@ module.exports = {
     'import/prefer-default-export': 'off',
     'react/require-default-props': 'off',
     'typescript-sort-keys/interface': 'error',
+    'react/no-array-index-key': 'off'
   },
   settings: {
     react: {

diff --git a/src/packages/core/src/checkbox-group/CheckboxGroup.tsx b/src/packages/core/src/checkbox-group/CheckboxGroup.tsx
@@ -26,9 +26,9 @@ export const CheckboxGroup = (props: CheckboxGroupProps) => {
     }
   };
 
-  const renderOptions = options.map((option) => (
+  const renderOptions = options.map((option, index) => (
     <Checkbox
-      key={option.value}
+      key={`${option.value}-${index}`}
       label={option.title}
       description={option.description}
       checked={value.includes(option.value)}

diff --git a/src/packages/core/src/datalist/DataList.tsx b/src/packages/core/src/datalist/DataList.tsx
@@ -28,8 +28,7 @@ export function DataList(props: DataListProps) {
         return (
           <div
             className={lineClassNames}
-            /* eslint-disable-next-line react/no-array-index-key */
-            key={`${index}-${item.title}`}
+            key={`${item.title}-${index}`}
           >
             <div className="_e_datalist__title" style={{ flexBasis: titleWidth }}>{ item.title }</div>
             <div className="_e_datalist__value">{ item.value }</div>

diff --git a/src/packages/core/src/radio-group/RadioGroup.tsx b/src/packages/core/src/radio-group/RadioGroup.tsx
@@ -28,9 +28,9 @@ export const RadioGroup = (props: RadioGroupProps) => {
     }
   };
 
-  const renderOptions = options.map((option) => (
+  const renderOptions = options.map((option, index) => (
     <Radio
-      key={option.value}
+      key={`${option.value}-${index}`}
       label={option.title}
       description={option.description}
       checked={option.value === value}
@@ -44,6 +44,7 @@ export const RadioGroup = (props: RadioGroupProps) => {
 
   return (
     <Fieldset
+      role="radiogroup"
       className={className}
       id={id}
       legend={legend}