Adding custom value to multiselect when user hits enter

💬 App Building
,
1

I'm using multiselect with no predefined list of options and with "allowCustomValues" property set to true. The multiselect's datasource set to variable which is array. When I populate this array (somehow), multiselect available options are changing accordingly, no issues here.

Now, what I want to achieve is that when user enters a text in multiselect component which isn't in the list and presses enter, I want to add this option to array and show it as already selected in the multiselect.

The problem is that there are four events and I couldn't find appropriate one for that behavior. Change, Blur, Focus or InputValueChanged (the latter is firing on every button pressed) are not the options I think.

Is there any way to achieve this?

3

Ok so this was tricky since there is no documented way to do this. But i was able to pull off a version of it.

  1. Set the array of original options in a variable to make it mutable: originalMultiselectOptions
  2. Then introduce another array finalMultiselectOptions whose initial value is basically the multiselect1.inputValue appended with the original array: [...originalMultiselectOptions.value, multiselect1.inputValue]
  3. On your multiselect, add a Change event handler with 'Set Variableaction, in which you update the value oforiginalMultiselectOptions=finalMultiselectOptions`

Two caveats of this workaround:

  1. Even though a new tag is added in the multiselect, the typed text also stays. Don't think there's a fix for it.
  2. The users can't press enter, but can see a new option dynamically pop up in the dropdown that they can click.

Please import the attached sample app in your Retool workspace to see it in action.

Adding custom value to multiselect when user hits enter.json (11.0 KB)

Hope this helps,
Abdul Wasae
Toolshed - Hire Retool Developers

4

Hi @Toolshed,

Thank you so much for such great example. It's definitely is better than I did just because of simplicity. However, it would be nice to have submit event or at least make Change event works in a case for example when any validations are off.

5

You're welcome.

I agree. Similar to how Retool have allowed custom values in "Tag" type table columns, they can add better support for custom values in multiselect dropdowns.

Don't forget to mark the solution as ":white_check_mark: Solved" for others to find the solution easily :slight_smile:

Regards,
Abdul Wasae
Toolshed - Hire Retool Developers