bug(button-toggle): changing the name input on button-toggle-group with multiple causes the name on button-toggle components to override

[sarthikg]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

In the button-toggle component, there is a bug where the implementation of name (HTML attribute) is inconsistent. A brief description for the bug is:

Incase of using the button-toggle group component with the input of multi set to true and passing a name input to the parent & different name inputs for the button-toggle child elements, the name (HTML attribute) for the child button-toggle elements are correctly applied at first, but if the name input for the button-toggle group element is changed again during the lifecycle of the component, the name (HTML attribute) for the child button-toggle elements simply inherits the name input value from the button-toggle group.

In technical terms, upon the initial load (ngOnInit), the name input values passed to the button-toggle child elements is applied to them as their name(HTML attribute), but if the name input is changed for the button-toggle group component later on during the lifecycle of the component, (ngOnChanges), the child button-toggle elements simply uses the new name input passed to the parent button-toggle group component as their name(HTML attribute).

PS: even though the use-cases for changing the name are slim, still there seems to be this small leak happening for the case of multi set as true.

Reproduction

Steps to reproduce:

1. Stackblitz - https://components-issue-xzptzf.stackblitz.io
2. Dynamically change the name input for the mat-button-toggle-component when the input of multi for the same is set to true
3. Observe how the HTML name attribute of the mat-button-toggle gets overridden by the name input from the mat-button-toggle-component.

Expected Behavior

The expected behavior is:

The name input passed to the button-toggle group component in the case of multi set as true should only be applied to itself, and should not also be applied to the child button-toggles, as the child elements have their own name inputs.

OR

The name input passed to the button-toggle group component in the case of multi set as true should also be applied to the child button-toggle elements during the initialization, and not only when the name input changes for the button-toggle component later during the lifecycle of the component.

Actual Behavior

Currently, the name input passed to the button-toggle group component is not overriding the name value (later used as HTML attribute) during the initialization of the component, but only once the name input is changed for the button-toggle group component later in the lifecycle of the component.

Environment

• Angular: 13.3.0
• CDK/Material: 13.3.0
• Browser(s): Irrespective
• Operating System (e.g. Windows, macOS, Ubuntu): Irrespective

[sarthikg]

If required, I could open a PR for solving this issue

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}