fix(components): [checkbox-group/radio-group] avoid passing alias fields to component (#22346)

* fix(components): [checkbox-group/radio-group] avoid passing alias fields to component

* test: fix case

packages/components/checkbox/__tests__/checkbox.test.tsx

@@ -186,6 +186,21 @@ describe('Checkbox', () => {
     expect(checkboxes[2].classes()).toContain('is-disabled')
   })
 
+  test('should avoid passing alias fields to el-checkbox', async () => {
+    const modelValue = ref(1)
+    const options = [{ value: '3', name: 'Option A' }]
+    const wrapper = mount(() => (
+      <CheckboxGroup
+        v-model={modelValue.value}
+        options={options}
+        props={{ label: 'name' }}
+      />
+    ))
+    await nextTick()
+    const checkbox = wrapper.find('.el-checkbox')
+    expect(checkbox.find('input').attributes('name')).not.toBe('Option A')
+  })
+
   test('checkbox group with dynamic modelValue', async () => {
     const form = reactive<{ checked: string }>({ checked: '' })
     const wrapper = mount({

packages/components/checkbox/src/checkbox-group.vue

@@ -21,7 +21,7 @@
 
 <script lang="ts" setup>
 import { computed, nextTick, provide, toRefs, watch } from 'vue'
-import { isEqual, pick } from 'lodash-unified'
+import { isEqual, omit, pick } from 'lodash-unified'
 import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { debugWarn } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
@@ -69,12 +69,13 @@ const aliasProps = computed(() => ({
   ...props.props,
 }))
 const getOptionProps = (option: Record<string, any>) => {
+  const { label, value, disabled } = aliasProps.value
   const base = {
-    label: option[aliasProps.value.label],
-    value: option[aliasProps.value.value],
-    disabled: option[aliasProps.value.disabled],
+    label: option[label],
+    value: option[value],
+    disabled: option[disabled],
   }
-  return { ...option, ...base }
+  return { ...omit(option, [label, value, disabled]), ...base }
 }
 
 provide(checkboxGroupContextKey, {

packages/components/radio/__tests__/radio.test.tsx

@@ -264,6 +264,21 @@ describe('Radio group', () => {
     expect(radio.value).toEqual(6)
   })
 
+  it('should avoid passing alias fields to el-radio', async () => {
+    const modelValue = ref(1)
+    const options = [{ value: '3', name: 'Option A' }]
+    const wrapper = mount(() => (
+      <RadioGroup
+        v-model={modelValue.value}
+        options={options}
+        props={{ label: 'name' }}
+      />
+    ))
+    await nextTick()
+    const radio = wrapper.find('.el-radio')
+    expect(radio.find('input').attributes('name')).not.toBe('Option A')
+  })
+
   it('passes custom attributes from options to el-radio', () => {
     const options = [
       { value: 'a', label: 'A', 'data-test': 'custom-attr-1' },

packages/components/radio/src/radio-group.vue

@@ -38,7 +38,7 @@ import {
   radioGroupProps,
 } from './radio-group'
 import { radioGroupKey } from './constants'
-import { isEqual } from 'lodash-unified'
+import { isEqual, omit } from 'lodash-unified'
 import ElRadio from './radio.vue'
 
 import type { RadioGroupProps } from './radio-group'
@@ -81,12 +81,13 @@ const aliasProps = computed(() => ({
   ...props.props,
 }))
 const getOptionProps = (option: Record<string, any>) => {
+  const { label, value, disabled } = aliasProps.value
   const base = {
-    label: option[aliasProps.value.label],
-    value: option[aliasProps.value.value],
-    disabled: option[aliasProps.value.disabled],
+    label: option[label],
+    value: option[value],
+    disabled: option[disabled],
   }
-  return { ...option, ...base }
+  return { ...omit(option, [label, value, disabled]), ...base }
 }
 
 provide(