Add createOptionPosition prop to Select component

[EdvinasDaugirdas]

Hey,

I'm using MultiSelect component with allowCustomValue setting enabled and have run into a small issue. When the list has a lot of options it's not clear that you're able to create a new custom value, since that particular option sits at the bottom of the list.

Select components are based on react-select, which has a prop createOptionPosition - it lets you position Create new value option either as a first or last element of the list. Currently the prop is not supported, but I would gladly open a PR to allow passing it through.

@staton-hyse11 @JoaoSilvaGrafana

[staton-hyse11]

I would prefer we standardize one way to go about this. I know this is used throughout the product and it would be critical for this to behave the same wherever used. If we allow the createOptionPosition prop to accept either, I'm afraid that we will have controls that look the same but behave differently — this would be a negative impact on the experience of using them.

[EdvinasDaugirdas]

Doesn't it behave in the same way, but just looks differently? I do get the rationale of leaving things standardised, however it seems that this particular standard leads to a worse experience - the option of creating a new value is hidden, which could be a crucial part of the features functionality.

Do we expect the user to know that the creation option is on the bottom of the list? Or do we offer an alternative UI for the same functionality, which I could leverage?

[staton-hyse11]

To clarify, the select would look exactly the same but some would have the "create new" option at the top and others at the bottom. This we would want to be the same across the product.

[staton-hyse11]

Also, we could look into transitioning these to have the "create new" to the top but we would need to understand product-wide use of this to ensure the change works for all versus a single use-case.

[EdvinasDaugirdas]

To clarify, the select would look exactly the same but some would have the "create new" option at the top and others at the bottom. This we would want to be the same across the product.

Yes, that's what I would expect 👌

Also, we could look into transitioning these to have the "create new" to the top but we would need to understand product-wide use of this to ensure the change works for all versus a single use-case.

Understandably so. Let me know in case you need any help from me. 🎉

[JoaoSilvaGrafana]

This is something we have discussed before, how in general the idea of "creating" something just in a select component can be confusing.
Could you give us more details on your specific use case? From those screenshots it seems like the select component is in a kind of list and is used for searching? If that is the case then maybe for creation it would be better to have a button next to these filters. But maybe I am not understanding the use case 100%

[EdvinasDaugirdas]

The component is being used to select certain filters for the list below. User can select a predefined value from already existing options or should be able to partially match a certain value, meaning create his own option.

Example: I have a list and I want to filter down results by URL which contain a string group. The screenshot below indicates the state that I'm trying to achieve.

If I type in group I'm presented with already existing values (which is great!), but it's hard to notice that I can partially match a certain value, since that option lives at the bottom of the options list.

---

If that is the case then maybe for creation it would be better to have a button next to these filters.

I'm not sure I understand how this would look like 🤔

[JoaoSilvaGrafana]

Aah ok I didn't realise that this worked like this, I thought your "add" action actually added something in the rows, not just another term to the search. Ignore my suggestion of a button then 😅

Now understanding what the flow is, I have to agree that have the "add" option at the button is not discoverable. It feels like here what we want is for the user to type something like "group" and then press enter, rather than have to then scroll all the way to the bottom to add that option.

[EdvinasDaugirdas]

That's what I would expect too - clicking Enter would create a new value. I did not propose that solution though, because it looks totally different from what we have right now.

There's also a problem with the underlying react-select library, it automatically "selects" the first option from the options list. Could be rather confusing to the user if a new value is created while an option is visibly selected. 🤔

[gelicia]

Hello, as you may have heard, we are transitioning away from using discussions to discuss feature requests. Due to the age and number of responses to this discussion, we are deciding to close it. If this is something you would like to see in Grafana, feel free to open an issue so the discussion can continue. Thank you!