React-select: Create new option is always focused first, even if other options match query

[tushar-singh]

When you type something that matches other options, instead of the first match being highlighted, Createable will put "Create option {query}" first and highlight that.

This stops you from typing the option (entirely or partially) and hitting enter to select that option.

Can be recreated here http://jedwatson.github.io/react-select/ (Custom tag creation)

I'm sorry if this intended. Feels like a bug to me

[karaggeorge]

This seems like a bug. I'll work on a PR to fix it

[karaggeorge]

@tushar-singh On a second thought, from looking at how the code is implemented, this might be the intended behavior. If it is confirmed as a bug, I can work on a fix.

So, the question is, in a Creatable Select, when there is an option 'Blue' for example, and the user inputs 'Bl', both the options 'Create option "Bl"' and 'Blue' appear in that order. Which one should be the focused one?

Currently, the 'Create option "Bl"' will be focused until there is an entire match with one of the options.

[bbinoy]

I find the current behaviour annoying, because mostly I want to select an existing item and only sometimes create a new one. A change would be awesome :)

[mshwery]

I agree that this feels like a not-ideal user experience, regardless of whether this is a bug or intended feature.

I would suggest that the default placement of the "createable" option be at the _bottom_ of the matched results, instead of at the top of the results. You could still keep it focused, potentially (e.g. preferCreateableMatch={true} as a prop). This would match other implementations that are similar. For instance, Gmail provides similar functionality for picking or creating labels for your emails.

[bcalik]

Is there any progress on this? This is the only reason that I can't start using React for all next projects. Create option definitely has to be at the bottom.

Look the screenshots below, It always leads me to create new option even if it already exist. So we will end up having multiple duplicate and mistyped data in our database.

[jfbaraky]

Now I'm fixing this on server-side, filtering duplicating keys, but a simple option to fix it on the bottom will be awesome.

[danawoodman]

Has there been any progress on this issue? It seems like it would be a simple fix? Would love to have it at the bottom instead of the top (or perhaps configurable top or bottom?)

[tushar-singh]

It behaves like that in v2 – https://react-select.com/creatable

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!