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( + ` + 3 + 6 + 9 + `, + () => ({ + radio: 3, + }) + ) + + const wrapper2 = _mount( + ` + 3 + 6 + 9 + `, + () => ({ + 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( ` 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() 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(