React-tags: Auto-selecting the first suggestion

Created on 1 Nov 2016  ·  9Comments  ·  Source: i-like-robots/react-tags

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.

question

Most helpful comment

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

All 9 comments

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?

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.

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.

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

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.

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

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

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

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

famouspotatoes picture famouspotatoes  ·  5Comments

filippofilip95 picture filippofilip95  ·  4Comments

V6
i-like-robots picture i-like-robots  ·  11Comments

yrik picture yrik  ·  10Comments

yrik picture yrik  ·  4Comments