bug(MatAutocomplete): requireSelection directive does not work the same on documentation and stackblitz example

[rcb98]

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

MatAutocomplete's requireSelection directive has a weird behaviour that isn't present in the documentation examples but is present in the Stackblitz link attached to the same example titled "Require an autocomplete option to be selected".

Reproduction

StackBlitz link: https://stackblitz.com/edit/vctmtb?file=src%2Fexample%2Fautocomplete-require-selection-example.css
Steps to reproduce:

1. Click on field to open autocomplete panel
2. Select any available option, for instance "One"
3. Add an extra character to the input field, for instance "Onea"
4. Focus out of the field by clicking outside
5. See error (input is not reset)

NOTE: It's possible that it works as expected on the first try, so in that case, try to follow the same steps another time but with another option.

Expected Behavior

The form control should be cleaned out when detecting the option is not the same as one of the autocomplete's options. In this case, "Onea" is not the same as "One", so the input should reset and left empty.

Here you can see it working as expected in Angular Material's MatAutocomplete documentation.

Actual Behavior

The input is not cleaned out and stays with the wrong value.

Environment

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

[crisbeto]

This should've been fixed in #28628, but it hasn't been released yet.

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