Dropdown "autoselection" does not select first instance in source

[ottosson]

Describe the bug

When typing in a "dropdown" cell you'd expect the first match to be selected/highlighted in the source dropdown menu. This is currently not the case. I haven't investigated exatly how it behaves but it feels a bit random sometimes.

Video/Screenshots

In this video it seems to select in the order as if it was sorted alphabetically, but that's not always the case.

hot_dropdown_typing_selection.mp4

Provide a link to the demo with the bug reproduction

https://handsontable.com/demo

Handsontable version

15.0.0

Framework version

No response

Your environment

Webview2 (edge webview on windows)

[AMBudnik]

Hm... I do not know if I fully understand the request, @ottosson

It seems that now (in v15.0.0) we have the same output as in the previous versions.

When a cell contains a value, that value is highlighted in the list of choices. If the cell is empty, the first value is highlighted instead.

ps. I cannot run the video. It seems to last only 0 seconds. Could you please resend that?

[ottosson]

Sorry about the video... don't know what went wrong. It was working when I published the issue...

Anyway!

Take a look at this screenshot from the demo page. I've typed "to" and would expect "Toronto" to be highlighted. But instead it's "Tokyo" which is alphabetically before "Toronto" but I would expect the best match first in the list to be selected.

Here's a fiddle as well: https://jsfiddle.net/zeywuhtx/1/

[AMBudnik]

Thank you for sharing, @ottosson I see what you mean.

The alphabetical order has always been consistent. Here's version 10.0.0, for example: https://jsfiddle.net/asp4gjq3/2/. It behaves the same as v15.0.0. However, in both themes (Main and Horizon), there is no indication that 'Toronto' also matches the query. In a no-theme option, it is achieved by bolding 'To' in 'Toronto'. I don’t see this behavior specified in the requirements, so I’ll report it internally as a bug. Thank you for pointing it out.

[ottosson]

Ah, I see!

I don't know how the logic works behind the scene, but I would have expected it to be something like this to select the instance:
list.find(x => x.toLowerCase().startsWith("to")), anything else seems to do more than it needs to (like sorting the source array before matching).

Maybe it's subjective... but until I type a third letter both toronto and tokyo are just as likely to be correct, so wouldn't it make more sense if the first item in the list was selected?

[AMBudnik]

Maybe it's subjective... but until I type a third letter both toronto and tokyo are just as likely to be correct, so wouldn't it make more sense if the first item in the list was selected?

Changing that could lead to a breaking change for the users. Surely, the first option or the alphabetically first option both sound like suitable solutions. But it seems that Google Sheets is doing exactly what you'd expect—they remove items from the list and highlight the first one.

so we might actually think about altering this behavior. Thank you for mentioning that as well. I will add that suggestion to our internal ticketing system and notify you as soon as we have any updates on the subject.

[ottosson]

I don't mind seeing all alternatives as I type. So at least keep that as an option if nothing else. My experience is that users get confused when nothing shows up in the menu when a value is pre-selected.

[AMBudnik]

when nothing shows up in the menu

yes, this is unacceptable. We already have some ideas on how to bring it back with the new CSS structure.

[AMBudnik]

Hi @ottosson we just fixed the mentioned issue in v15.1.0! :)

Thank you again for your feedback.

Take a look at this screenshot from the demo page. I've typed "to" and would expect "Toronto" to be highlighted. But instead it's "Tokyo" which is alphabetically before "Toronto" but I would expect the best match first in the list to be selected.

Here's a fiddle as well: https://jsfiddle.net/zeywuhtx/1/