Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug(Button Toggle): Template-driven form not focusable #30097

Closed
1 task done
BojanSlavkovskii opened this issue Nov 27, 2024 · 0 comments · Fixed by #30103
Closed
1 task done

bug(Button Toggle): Template-driven form not focusable #30097

BojanSlavkovskii opened this issue Nov 27, 2024 · 0 comments · Fixed by #30103
Assignees
Labels
area: material/button-toggle P2 The issue is important to a large percentage of users, with a workaround

Comments

@BojanSlavkovskii
Copy link

BojanSlavkovskii commented Nov 27, 2024

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

Up until v18

Description

On Button Toggle, in the examples with forms, the Reactive form is working fine but the "Template-driven form" is not focusable, when you try to tab into it, it just skips it.
All buttons in there has tabindex="-1" where in reactive-form only the first button has tabindex="0", even without any control ( formControl or ngModel ) it works fine and tabindex on the first button is 0 (if nothing is selected).
If there is anything selected when using ngModel, then it works fine as the other two (with formControl and without any control).

UPDATE: If there is button that reset the formControl, you also cannot access the toggle-button.

Reproduction

Material link: https://material.angular.io/components/button-toggle/examples
Steps to reproduce:

  1. Go to the second example.
  2. Tab into it, and try focusing the first button-toggle-group ( Template-driven form ) without pre-selecting value.

Expected Behavior

Expected behavior is to behave as the one that has FormControl and the one that has nothing in it. It's expected the first button to be focused if value isn't selected.

Actual Behavior

Button-toggle is not focusable if there isn't any selected value like without using ngModel.

Environment

  • Angular: 19
  • CDK/Material: 19
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows
@BojanSlavkovskii BojanSlavkovskii added the needs triage This issue needs to be triaged by the team label Nov 27, 2024
@crisbeto crisbeto added P2 The issue is important to a large percentage of users, with a workaround area: material/button-toggle and removed needs triage This issue needs to be triaged by the team labels Nov 29, 2024
@crisbeto crisbeto self-assigned this Nov 29, 2024
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 29, 2024
…n first render

Fixes an issue where the button toggle group would reset all the buttons back to `tabindex="-1"` if they're all static (e.g. not in a loop) and none of them match the value.

Fixes angular#30097.
crisbeto added a commit that referenced this issue Dec 2, 2024
…n first render (#30103)

Fixes an issue where the button toggle group would reset all the buttons back to `tabindex="-1"` if they're all static (e.g. not in a loop) and none of them match the value.

Fixes #30097.

(cherry picked from commit f0a767c)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: material/button-toggle P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet
2 participants