Skip to content

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

@GlennGeelen

Description

@GlennGeelen

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.<computed> (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


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


Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions