bug(MatAutocomplete): when using single mat-autocomplete with multiple inputs, panel does not open in some circumstances and displays incorrect option as selected

[bart113]

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

14.2.7

Description

MatAutocomplete enters a broken state (invisible, but clickable), when the following conditions are met:

• a single <mat-autocomplete> instance is used by multiple <input>s
• user moves focus between these inputs using a mouse

Reproduction

StackBlitz link: https://stackblitz.com/edit/ajkqp1?file=src%2Fexample%2Fautocomplete-simple-example.html

Steps to reproduce:

1. Open the StackBlitz demo.
2. Click the "Number 2" input.
3. Observe that the autocomplete panel is now open.
4. Click the "Number 1" input.

Expected Behavior

The autocomplete panel for the "Number 1" input is now open.

Actual Behavior

The autocomplete panel was visible for a brief moment, and then disappeared.

In particular, the panel still exists and is clickable, but has opacity: 0. This style appears to have been set by the animation of the panel that has just been closed.

Note that:

• The bug cannot be observed, if user does not click, but uses Tab to navigate between the <input> fields.
• The panel works correctly in Angular Material 17, if every input has its own <mat-autocomplete> defined. Demo.
• Using a single <mat-autocomplete> for multiple <input>s used to work in Angular Material 14.2.7. Demo.

Environment

• Angular: 17.0.0
• CDK/Material: 17.0.4
• Browser(s): Chrome 120.0.6099.129
• Operating System: Linux

[zarend]

Hello,

I was wondering if we could get more information on this to understand what your need is. You can change the element that the autocomplete is attached to using the matAutocompleteOrigin directive together with the matAutocompleteConnectedTo input.

A single instance is used by multiple inputs.

MatAutocomplete is designed to connect to a single element. I don't think that connecting autocomplete to more than one elements is a supported configuration.

How come you need to connect one autocomplete to multiple inputs?

Best Regards,

Zach

[bart113]

Thank you for the reply @zarend!

How come you need to connect one autocomplete to multiple inputs?

It's not exactly my case, but imagine that there are 50 input fields on the page, and each of them should offer the same 300 autocomplete options. If we instantiate a separate mat-autocomplete for each input, Angular will have 50*300 = 15k mat-options to process (and will do so even if they are not displayed on the screen). This will hurt performance a lot. If we instead use a single MatAutocomplete for all the inputs, Angular will only need to process 300 mat-options.

At most one MatAutocomplete panel is going to be displayed at any moment anyway, so having just one MatAutocomplete in general seems like a reasonable idea, right? Even the MatAutocomplete's API is structured in a way that hints at this solution :) .

This is essentially the scenario that was described here: https://stackoverflow.com/q/70781743

---

Another thing that is broken within MatAutocomplete in this scenario are the checkmarks ("single selection indicators").

Consider the following reproduction steps:

1. Open https://stackblitz.com/edit/ajkqp1?file=src%2Fexample%2Fautocomplete-simple-example.html
2. Click on the "Number 2" input, and pick "Two" from the MatAutocomplete panel.
3. Now click on the "Number 1" input. Notice that the MatAutocomplete panel has a checkmark next to "Two" despite no value being selected.
4. Click on "One" within the MatAutocomplete panel.
5. Once again, click on the "Number 2" input. Notice that the value within the input is "Two", but the MatAutocomplete panel has a checkmark next to "One".

All-in-all, the MatAutocomplete's checkmarks completely miss the user's expectations in this example.

Storing the state of these checkmarks within the MatAutocomplete component appears to have only downsides. In general, it seems that the MatAutocomplete component should be as close to stateless as possible. And recently, it has been moving in the opposite direction...

[zarend]

Thanks for getting back to me, I think I see how reusing an autocomplete instance would be good for performance. That's a good point.

Looks like MatAutocomplete is intended to support multiple triggers. There's support for the changing origin while it's open.

https://github.com/angular/components/blob/main/src/material/autocomplete/autocomplete.spec.ts#L3654

I don't know off the top of my head why it's not working in this stackblitz.

-Zach

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