Autocomplete: Incorrect items shown as selected after async update of data

[dagerikhl]

🐛 Bug Report

As I didn't receive a response on Slack, I'll try reporting it here instead :)

When filtering the list, then selecting one of the filtered items, the incorrect input value is shown in the Autocomplete input (shows the item corresponding to the same index in the unfiltered list as was clicked in the filtered list), even though the state and value property is updated correctly.

To Reproduce

I wrote reproduction steps in the CodeSandbox.

https://codesandbox.io/s/busy-cohen-bgjtd3

Expected behavior

I expect the indicated selected item to be the one actually chosen in the state, and not the item with the same index as the selected item had in the filtered list.

Run npx envinfo

See CodeSandbox for env.

Eufemia Version

Various projects experience this, from at least v9.11+ and up to v9.26.

[tujoworker]

Hi!

Can you try this?

- const handleChange = ({ data }) => {
- setValue(data ? data.key : null)
+ const handleChange = ({ value }) => {
+ setValue(value)

The value should be the array index of the internal data list.

[dagerikhl]

Thank you for the response @tujoworker ! :D

Using the index semi-works. It lets me select the correct item, and the correct item is shown in the input. There's another issue when using the index though, when doing manual filtering of the options. Sometimes, the list will indicate the wrong item in the list (as it's index-based, and the options are changing when typing) when we try to type something new that changes the options.

It requires a bit more state-handling, but is a feasible solution to mye issue, I think. See updated CodeSandbox: https://codesandbox.io/s/busy-cohen-bgjtd3

However, I still think the reported issue is a bug. I think it should be possible to use the key of the item as the value, and for that to reflect correctly in the input after selection. Using the index is a feasible workaround, but as using the key is a supported way of setting the value, there's still a bug there.

[dagerikhl]

Any news on this @tujoworker? :)

[tujoworker]

I hope we can get in touch and look at this together the coming week 🤞