Facility to have custom values in the "No Options" of a select

💬 Feature Requests
1

SELECT control drop down.
When I enter a value in the SELECT that does NOT exist in the list of available options, the control shows "No options"
image
Currently I can't find a way to change this "No options" value or even detect if it is being displayed!
It would be great if:

  • Have a boolean that is true when the "No options" is being displayed
    or
  • Be able to replace the "No options" with a button/link so we can give the user the chance to "add new" via a modal for example.

Thanks

2

It would be cool to have custom input for the select component. Hope this helps in the meantime

Boolean

If the data source for your Select component is a simple array of strings, you could use the following as a boolean:

// works similar to when it shows "No Options"
{{ select1.data.some(option => option.includes(select1.inputValue)) }}

// excludes partial matches as well. 
{{ select1.data.includes(select1.inputValue) }}

Add New

There's a hacky (needs refinement) work around to dynamically add new values to the select.

  1. Add your current options to a variable.
    image

  2. Set the dataSource for select1 to be mapped to:

{{
  (()=>{
    if (optionsArray.value.includes(select1.inputValue) || select1.inputValue === "")
      return optionsArray.value
    else
      return [...optionsArray.value, select1.inputValue]

    // expand as needed

  })()
}}
  1. Use the onChange event handler to update optionsArray.
    image

Value: {{[...optionsArray.value, select1.inputValue] }}
Only run when: {{ !optionsArray.value.includes(select1.value) }} to prevent duplicates.

3

Hey Rixlayer,

Maybe is not completely what you're looking for, but you can add the option "Allow custom values" within the "Interactions" settings:

image

When that happens, whenever something is written that is not an option, it gives the same as an option, and then you can decide what happens with that.

image

I have shown/hidden other components based on this selection using the following:

{{select35.selectedIndex !== select35.values.length}}

Hope that helps!

2 Likes
4

Hey @MiguelOrtiz, that's probably exactly what @peter.b was looking for. :clap:

I did not notice that option and have reinvented the wheel lol

2 Likes
5

We also have this empty state setting under Appearance->Advanced where you can modify "No options" to be some other text (or no text at all)

image
image1294×1064 103 KB