bug(FormField): Tabbing to then out of form field with "required" validator shows validation error.

[lee-cooper]

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

Premature error validation occurs when tabbing from the form field text entry section to the datepicker button. From an A11Y and usability perspective, this should not occur until the user has left the containing form field and button since the datepicker button is a valid way of filling out the form field.

Reproduction

StackBlitz link: https://components-issue-zzukvj.stackblitz.io Steps to reproduce:

1. Add Datepicker to app from angular material code example
2. Add required validator to form control
3. Tab from the form field section to the datepicker button
4. Error shows, despite not having left the control

Expected Behavior

Required validation does not occur when tabbing from the text entry section of the datepicker to the calendar pop-out button.

It should only occur when tabbing out of the containing form field and button.

Actual Behavior

Required error validation occurs when tabbing from the text entry section of the datepicker to the open calendar button

Environment

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

[amysorto]

I am unable to open the stackblitz it seems, can you check the link on your end?

[lee-cooper]

Hey @amysorto, it opens for me! I double checked the privacy settings and the url and it seems to be okay.

[zarend]

I can reproduce the reported behavior on the stackblitz link.

• Version 116.0.5845.96 (Official Build) (arm64)
• macOS 13.5 (22G74)

[zarend]

Hello folks, Thank you for reporting this issue. Unfortunately we are not able to take action if we cannot reproduce it. This might have already been fixed. If the issue persists, please provide reproduction steps or file a new issue report. -Zach

[lee-cooper]

Hello folks, Thank you for reporting this issue. Unfortunately we are not able to take action if we cannot reproduce it. This might have already been fixed. If the issue persists, please provide reproduction steps or file a new issue report. -Zach

Hi, I've replicated the issue using Angular 17. Can this be re-opened @zarend ?

https://stackblitz.com/edit/stackblitz-starters-b6hqgj?file=src%2Findex.html

[lee-cooper]

Hello folks, Thank you for reporting this issue. Unfortunately we are not able to take action if we cannot reproduce it. This might have already been fixed. If the issue persists, please provide reproduction steps or file a new issue report. -Zach

Also, I'm confused because even you said you could reproduce this back in August, and are now saying you can't.

[zarend]

Hello folks, Let's reopen this and take a look at https://stackblitz.com/edit/stackblitz-starters-b6hqgj?file=src%2Findex.html. -Zach

[zarend]

Hello folks, I can reproduce without Datepicker, only need Formfield . I don't think Datepicker is related and this may happen with any form field with "required" validator.

https://stackblitz.com/edit/stackblitz-starters-dxpwt7?file=src%2Fmain.ts

• Chrome Version 122.0.6261.94 (Official Build) (arm64)
• macOS 14.3.1 (23D60)

-Zach

[zarend]

Hello, I updated the title to clarify that the root cause is in form field, which affects multiple components. That way this issue can get more attention. -Zach

[lee-cooper]

Thanks for re-opening this Zach, I realize could've done a better job describing the issue to get this more traction.

Looking forward to what comes next!