angular / angular/components

Angular ARIA autocomplete selecting options with mouse click or enter don't select them, only with pressing tab.

Abierto
#32,765 1 comentario 0 reacciones 1 asignado Reclamado por @ok7sai Ver en GitHub
area: aria/combobox P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### Which @angular/* package(s) are the source of the bug?

Don't known / other

### Is this a regression?

No

### Description

When I setup the Autocomplete component with Angular ARIA components, like in the example provided on the angular website. There is something weird going on with selecting the searched options with a mouse click or pressing `Enter`.

## Reproducing the "bug"
When I use the filterMode `auto-select` and I search for `n`, a sub-set of the country list will appear. If I now move to the second or third option in the list and press enter the value in the input field will be filled with the slected option. But when I check the selected option with an effect, it is the first option of the filtered list.

When you do the same filtering and navigate to the second/thrid option and instead press tab. The selected options is actually selected.

I have made a stackblitz example to show this: https://stackblitz.com/edit/stackblitz-starters-xnilgqyl?file=src%2Fmain.ts,src%2Fcomponents%2Fautocomplete.ts

Is this behaviour by design? That the selection only works on the `tab`-keypress?

## Work around
The workaround we are using right now is to also bind `query` to the `[(value)]` of the `ngComboboxInput`, this way we always get the right selection. The drawback is that we get a console error out of `ngCombobox`.
```
my-component.container.html:11 ERROR TypeError: Cannot read properties of undefined (reading 'length')
at ComboboxPattern.onFilter (_combobox-chunk.mjs:221:55)
at combobox.mjs:308:46
at untracked (_effect-chunk.mjs:403:12)
at untracked2 (_untracked-chunk.mjs:2957:10)
at combobox.mjs:308:7
at Object.phaseFn (core.mjs:2693:30)
at AfterRenderEffectSequence.hooks. (core.mjs:2729:41)
at _debug_node-chunk.mjs:4155:27
at _AfterRenderImpl.maybeTrace (_debug_node-chunk.mjs:4212:75)
at _debug_node-chunk.mjs:4153:78
```

### Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-xnilgqyl?file=src%2Fmain.ts,src%2Fcomponents%2Fautocomplete.ts

### Please provide the exception or error you saw

```true

```

### Please provide the environment you discovered this bug in (run `ng version`)

```true

```

### Anything else?

_No response_

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.