Auto-selecting the first suggestion

[thienanle]

Is this currently possible? I think it would help in terms of UX. Type, enter, type, enter. Rather than type, down, enter, type, down, enter.

[i-like-robots]

I suppose it depends on whether the allowNew flag is set, perhaps when this is false (only suggested tags may be picked) that would make sense?

[muthukumarse]

Hi @i-like-robots

its doesn't as you say, i see the code always set selectedIndex = -1

Can I push a change, I made it work ? since i wants first item to be auto selected so it will be easier for user to select incase of first item.

also there is fix required to work TAB key well, when minQueryLength = 0, this too.

[Billy-]

This is a good idea, whether allowNew is set or not, having the first suggestion automatically focused means you can just hit enter to select it, rather than clicking or having to press down to select it.

[muthukumarse]

added pull request, pl look at the changes. PR - auto-select-first-item

[Billy-]

Re-reading my comment and now realise why it wouldn't make sense if allowNew was true. I'd say enable this behaviour is allowNew is false but not if it's true.

[agamm]

@i-like-robots any update on when this will be merged? 🙏

[bslinger]

We would love this option for our project as well, any news if it will make it into v6? We are using v6 beta 3 currently

[ghost]

Currently searching for the same solution for the project we are working on atm. Would love to see some movement on this issue. :)

[datzun]

For those wanting a workaround:

useEffect(() => {
     if (suggestions.length > 0) {
          // library doesn't auto-select the first item in the list
          inputRef.current.setState({  index: 0 });
     }
     else {
          // if no results, don't want to highlight
          inputRef.current.setState({ index: -1 });
     }
}, [suggestions]);

Where your inputRef is the ref to your element.

[i-like-robots]

This behaviour is available in v7+.