diff --git a/packages/form-core/src/choice-group/ChoiceInputMixin.js b/packages/form-core/src/choice-group/ChoiceInputMixin.js index 5c3694864..931ded641 100644 --- a/packages/form-core/src/choice-group/ChoiceInputMixin.js +++ b/packages/form-core/src/choice-group/ChoiceInputMixin.js @@ -110,6 +110,17 @@ const ChoiceInputMixinImplementation = superclass => if (changedProperties.has('modelValue')) { this.__syncCheckedToInputElement(); } + + if ( + changedProperties.has('name') && + // @ts-expect-error not all choice inputs have a parent form group, since this mixin does not have a strict contract with the registration system + this.__parentFormGroup && + // @ts-expect-error + this.__parentFormGroup.name !== this.name + ) { + // @ts-expect-error not all choice inputs have a name prop, because this mixin does not have a strict contract with form control mixin + this.name = changedProperties.get('name'); + } } constructor() { diff --git a/packages/form-core/test-suites/choice-group/ChoiceGroupMixin.suite.js b/packages/form-core/test-suites/choice-group/ChoiceGroupMixin.suite.js index ec118c3b8..d250f7b5f 100644 --- a/packages/form-core/test-suites/choice-group/ChoiceGroupMixin.suite.js +++ b/packages/form-core/test-suites/choice-group/ChoiceGroupMixin.suite.js @@ -112,6 +112,23 @@ export function runChoiceGroupMixinSuite({ parentTagString, childTagString } = { expect(el.formElements[1].name).to.equal('gender2'); }); + it('prevents updating the name property of a child if it is different from its parent', async () => { + const el = /** @type {ChoiceGroup} */ (await fixture(html` + <${parentTag} name="gender"> + <${childTag}> + <${childTag}> + + `)); + + expect(el.formElements[0].name).to.equal('gender'); + expect(el.formElements[1].name).to.equal('gender'); + + el.formElements[0].name = 'gender2'; + + await el.formElements[0].updateComplete; + expect(el.formElements[0].name).to.equal('gender'); + }); + it('adjusts the name of a child element if it has a different name than the group', async () => { const el = /** @type {ChoiceGroup} */ (await fixture(html` <${parentTag} name="gender">