mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-12-21 02:50:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [radio-group] unique id (#7859)

Browse Source
This commit is contained in:
JeremyWuuuuu 2022-05-23 18:27:27 +08:00 committed by GitHub
parent 0e3ea58421
commit 9105bd666b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/components/radio/__tests__/radio.test.tsx
View File

@ -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>

7
packages/components/radio/src/radio-group.vue
View File

@ -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(