Thanks to visit codestin.com
Credit goes to github.com

Skip to content

bug(mat-select): lose the focus when no selection is made by pressing ESC #30632

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

Open
1 task done
gcocevar opened this issue Mar 14, 2025 · 4 comments
Open
1 task done
Labels
area: material/select P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@gcocevar
Copy link

gcocevar commented Mar 14, 2025

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

15

Description

When the mat-select is expanded, if user tries to close it with the "ESC" key without making a selection, the focus is lost and goes at the bottom of the page.

Tested in desktop environment with all major browsers and screen-readers.

Reproduction

Example with the Angular latest version:
Steps to reproduce:
For example with NVDA:

  • make sure that NVDA is not in the "browse mode"
  • using arrow keys, put the NVDA keyboard focus on the select (for example from the Angular Material's documentation: "Favorite food", you hear "clickable Favorite food combo box collapsed opens list"). Tip: in "browse mode" you can use the "C" key to jump to the next combo box in the page
  • make NVDA interact with the select ("focus mode") by pressing "ENTER" key or with the "FORCED FOCUS MODE" key (NVDA + space). You should hear a sound and NVDA speech again "Favorite food combo box collapsed opens list"
  • press again enter to expand the select panel to show all possible options
  • optionally, scroll options with down and up arrow keys
  • do not select any option and press the "ESC" key. You should hear a "descending" sound that means the NVDA "focus mode" was deactivated and you are now in "browse mode" again
  • using the up and down arrow keys to explore the page, you can see that the NVDA focus was moved down at the bottom of the page (at least for the NVDA virtual dom) and the select is still opened.

Expected Behavior

For reference take the native example where the select should collapse when pressing the "ESC" key and the screen-reader focus remains on the select element.

Notice that in Angular Material v14 or v15, the correct behavior is the following:
while the select is open and the screen-reader is in the focus mode, if you press the "ESC" key one time the select closes but the focus mode not. Afther that, if you press "ESC" again the NVDA focus mode will deactivate and the focus will be placed where it was before you started the interaction.

Actual Behavior

Same as Reproduction

Environment

  • Angular: 16>
  • CDK/Material: Material
  • Browser(s): Chrome and Firefox (latest)
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows
@gcocevar gcocevar added the needs triage This issue needs to be triaged by the team label Mar 14, 2025
@crisbeto
Copy link
Member

Can you share a reproduction where you see focus being lost? I tried it against our demo app and the documentation site and in both focus never leaves the select's trigger element.

@denisbonamici
Copy link

denisbonamici commented Mar 18, 2025

https://drive.google.com/file/d/1eH7O0DpeJUlUQtTsHVAl85OxH5mqwQWA/view?usp=sharing

Can you share a reproduction where you see focus being lost? I tried it against our demo app and the documentation site and in both focus never leaves the select's trigger element.

@denisbonamici
Copy link

https://drive.google.com/file/d/1eH7O0DpeJUlUQtTsHVAl85OxH5mqwQWA/view?usp=sharing

Can you share a reproduction where you see focus being lost? I tried it against our demo app and the documentation site and in both focus never leaves the select's trigger element.

@crisbeto it's ok? You can see the video?

@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent area: material/select and removed needs triage This issue needs to be triaged by the team labels Apr 29, 2025
@denisbonamici
Copy link

denisbonamici commented May 12, 2025

https://drive.google.com/file/d/1eH7O0DpeJUlUQtTsHVAl85OxH5mqwQWA/view?usp=sharing

Can you share a reproduction where you see focus being lost? I tried it against our demo app and the documentation site and in both focus never leaves the select's trigger element.

@crisbeto it's ok? You can see the video?

Youtube link: https://youtu.be/bWzKszm4cj0?si=pwNKFpjYly2j9QJu

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: material/select P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

No branches or pull requests

3 participants