bug(mat-menu): input inside of a <form> with mat-menu-item on it un-focuses when a "u" is entered into the textbox

[Benji Banwart]

Is this a regression?

I'm not sure. I've noticed it in v15/16/17

Description

Problem

When a "mat-form-field" with a "input" is inside of a "form" that has mat-menu-item on it- all inside of a "mat-menu", if a user inserts a 'u' into the "input", the "input" element un-focuses

I was able reproduce this in multiple places in my app (wherever I had this combination of components) and I was able to recreate the issue on stackblitz

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-xn3atm?file=src%2Ftest.html
Steps to reproduce:

1. serve the code
2. open the menu
3. type in the input textbox
4. insert a 'u' character into it

Expected Behavior

I did not expect for the text box to un-focus and require me to re-click into the box to continue typing. It happens consistently with the letter 'u'.

I expected it to perform like any other text input.

Actual Behavior

If I inserted a 'u' into the "input", it un-focused.

Environment

• Angular: 15/16/17
• CDK/Material: 15/16/17
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[Benji Banwart]

example code in the stackblitz

[Kristiyan Kostadinov]

Nesting interactive controls (input inside a menu in this case) isn't a valid ARIA pattern so we don't support it either. You should be able to work around it by adding a (keydown)="$event.stopPropagation()" on the input.

[Benji Banwart]

I see, I was able to get around it by omitting the "mat-menu-item" from the form element.
Wasn't sure if this was an unknown bug or not.

Thanks Kristiyan

[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.}