From 9105bd666b19501896b34efa0f75bce55e75fcd8 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
Date: Mon, 23 May 2022 18:27:27 +0800
Subject: [PATCH] fix(components): [radio-group] unique id (#7859)

---
 .../components/radio/__tests__/radio.test.tsx | 36 +++++++++++++++++++
 packages/components/radio/src/radio-group.vue |  7 ++--
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/packages/components/radio/__tests__/radio.test.tsx b/packages/components/radio/__tests__/radio.test.tsx
index 73faab2597..5fe22f4b49 100644
--- a/packages/components/radio/__tests__/radio.test.tsx
+++ b/packages/components/radio/__tests__/radio.test.tsx
@@ -135,6 +135,42 @@ describe('Radio group', () => {
     expect(vm.radio).toEqual(6)
   })
 
+  it('id auto derive', async () => {
+    const wrapper1 = _mount(
+      `<el-radio-group v-model="radio">
+        <el-radio :label="3" ref="radio1">3</el-radio>
+        <el-radio :label="6" ref="radio2">6</el-radio>
+        <el-radio :label="9">9</el-radio>
+      </el-radio-group>`,
+      () => ({
+        radio: 3,
+      })
+    )
+
+    const wrapper2 = _mount(
+      `<el-radio-group v-model="radio">
+        <el-radio :label="3" ref="radio1">3</el-radio>
+        <el-radio :label="6" ref="radio2">6</el-radio>
+        <el-radio :label="9">9</el-radio>
+      </el-radio-group>`,
+      () => ({
+        radio: 3,
+      })
+    )
+
+    const id1 = wrapper1
+      .findComponent({ name: 'ElRadio' })
+      .find('input')
+      .attributes('name')
+
+    const id2 = wrapper2
+      .findComponent({ name: 'ElRadio' })
+      .find('input')
+      .attributes('name')
+
+    expect(id1).not.toEqual(id2)
+  })
+
   it('disabled', async () => {
     const wrapper = _mount(
       `<el-radio-group v-model="radio" disabled>
diff --git a/packages/components/radio/src/radio-group.vue b/packages/components/radio/src/radio-group.vue
index b746f5282f..e33ae528ea 100644
--- a/packages/components/radio/src/radio-group.vue
+++ b/packages/components/radio/src/radio-group.vue
@@ -27,6 +27,7 @@ import { radioGroupKey } from '@element-plus/tokens'
 import {
   useFormItem,
   useFormItemInputId,
+  useId,
   useNamespace,
 } from '@element-plus/hooks'
 import { debugWarn } from '@element-plus/utils'
@@ -37,11 +38,11 @@ defineOptions({
   name: 'ElRadioGroup',
 })
 
-let id = 1
 const props = defineProps(radioGroupProps)
 const emit = defineEmits(radioGroupEmits)
 
 const ns = useNamespace('radio')
+const radioId = useId()
 const radioGroupRef = ref<HTMLDivElement>()
 const { formItem } = useFormItem()
 const { inputId: groupId, isLabeledByFormItem } = useFormItemInputId(props, {
@@ -62,10 +63,8 @@ onMounted(() => {
   }
 })
 
-const randomName = `el-radio-group-${id++}`
-
 const name = computed(() => {
-  return props.name || randomName
+  return props.name || radioId.value
 })
 
 provide(