Adding custom value to multiselect when user hits enter

💬 App Building
,
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