angular / angular/components

bug(MAT-AUTOCOMPLETE): on option select on chrome android 13, dropdown collapses without selection

Ouverte
#32,275 4 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
Accessibility android area: material/autocomplete P2
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### 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

I have am having a bit of an issue with a mat-autocomplete.
I have deployed the code base from `https://stackblitz.com/run?file=src%2Fexample%2Fautocomplete-require-selection-example.html&startScript=start` to `http://resparke-indigo-backup.s3-website-ap-southeast-2.amazonaws.com/` so I can test it on my Android 13 device.
On Android 10, IOS Safari 17, 18 etc, macbook Chrome, it all works good.
But not on Android 13' Chrome.

What I can find from debugging is that when I click it sometimes doesnt select a value but just collapses the soft keyboard.

I created a recording with onclick debug output so you can see which element is clicked:

![Image](https://github.com/user-attachments/assets/b8f33b41-b121-4780-9acf-79a6e1787689)

I am not sure how to debug this, because the example I am using is pure and simple and 100% from angular mat website.
I think the issues is related to the softkeyboard closing which does something with the overlay.

### Reproduction

As mentioned above, the stackblitz example is deployed on `https://app-test.resparke.com` but you would have to run it on an Android 13 tablet , Chrome, with a soft keyboard and see this issue happening

### Expected Behavior

When option is selected, I expect that selection to be recorded.

### Actual Behavior

When I open the test app on `http://resparke-indigo-backup.s3-website-ap-southeast-2.amazonaws.com/`, and I click on the formfield, the dropdown appears and the softkeyboard opens, I select option 2. The soft keyboard closes and no option is selected. When I click again on the formfield, the dropdown appears again and now I can select and option. That seems to be a consistent behaviour on Android 13/Chrome.

### Environment

- Angular: 20.3.x
- CDK/Material: 202.2.12
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Android 13

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par l’exemple StackBlitz lié à src/example/autocomplete-require-selection-example.html et reproduisez le problème sur une tablette Android 13 avec Chrome et le clavier virtuel ouvert. Comparez la sélection de l’option 2 avec le comportement sur les plateformes fonctionnelles indiquées. C’est terminé lorsque l’option sélectionnée est enregistrée au premier appui et que la liste déroulante et le clavier se comportent correctement.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.