Using groups, searchable and createOption together breaks keyboard navigation

[mergeMarc]

Version

• Vue version: 3

Description

Pressing key up or down after inputting search text creates an error and does not navigate inside the search results.
Repeatably pressing one of the keys will eventually (after 3 to 5 presses) start navigating inside the dropdown.
This problem occurs when having set mode to "tags" and groups, searchable and createOptionall set to true.

Example error message

(Thrown in runtime-core.esm-bundler.js:218)

Uncaught TypeError: Cannot read properties of undefined (reading '__VISIBLE__')
    at ReactiveEffect.fn (multiselect.js:1076:49)
    at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
    at get value [as value] (reactivity.esm-bundler.js:1147:39)
    at forwardPointer (multiselect.js:1118:117)
    at Proxy.handleKeydown (multiselect.js:1584:9)
    at mergeProps.onKeydown._cache.<computed>._cache.<computed> (multiselect.js:2372:85)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
    at HTMLDivElement.invoker (runtime-dom.esm-bundler.js:370:13)

How to reproduce

• Create a Multiselect object and set the mode to "tags" and set the props groups, searchable and createOption to true.
• Populate the options with multiple groups that have multiple options.
• Enter the first few letters of an option in the search.
• Try to select one of the search results by pressing the down arrow key (without using the mouse).

Findings

It looks like the error occurs because the search input gets set as the pointer:
The pointer contains the search input string. On keydown, the pointer tries to find which group we are currently in. This is not successful since the user inputted string does not exist in our options (getParentGroup returns undefined). The error then gets thrown when trying to get the non existent "group properties" of undefined.

Possible solution

In the forwardPointer and backwardPointer:

• Check for the existence of the __CREATE__ property in the pointer and that it is set to true.
• Handle it like the pointer was null and start from the first/last visible search result option.

Code example

...
const forwardPointer = () => {
    if (pointer.value === null || pointer.__CREATE__ != null && pointer.__CREATE__ === true) {
...

Demo

Please use our JSFiddle template to reproduce the bug. Issues without working reproduction might be ignored.

Sorry, that fiddle template seems to be broken.

[adamberecz]

Thanks for reporting. Fixed in 2.6.0.