Custom value in select if no options

Hi, is it possible to add in a select a value if there're no matches with the search?

The select is configured as it:
image

If i search this is what happens:
image

while if no results, it says
image

What I want to do is that if there's no results, it compares a custom value in the select (eg: Not Available) that can be selected.

Is there any way to do this?

Thanks

There seem no a so way. How about add a custom validation rule? If customer input invalid value, error will disappear.
image

My problem is that I need that the value appearing when no there's no results can be selected and used in an insert query.

Hello, here is my workaround for your reference.
Use the Input change event handler of select component

If you type some character not in option's label or value, it will set the select1.value to "NOVALUE" in my example.

Here is attached app json, you and import it to create app to debug it.


select.json (5.5 KB)

let result = optionList.value.filter(item=>item.label.includes(select1.inputValue)||item.value.includes(select1.inputValue));
console.log(optionList.value);
if(result.length===0){ select1.setValue("NOVALUE") }

Thanks for the suggestion!

It's still not 100% accurate: what I'm looking for it's to have the option in the dropdown that can be selected, but not already selected.

OK,
so the script code should be modified to

let result = optionList.value.filter(item=>item.label.includes(select1.inputValue)||item.value.includes(select1.inputValue));
if(result.length===0){ select1.clearValue();optionList.setValue([...optionList.value,{label:"no value", value:"NOVALUE"}]);}
else{ optionList.setValue(optionList.value.filter(item=>item.value!=="NOVALUE")); }

in theory this will work right. but unfortunately, the option list don't update, until you blur and focus the select again. Retool don't fresh the option list in real time.

is this a feature quest or bug?

I'm trying doing with a different approach, in order to have "NOVALUE" always shown as an option, no matter what you type.

  • I've added "NOVALUE" in the query results
  • I'm setting the input change event handler as it:

let result = entity_query.data.value.filter(item=>item.includes(select_AddDest.inputValue)).concat("NOVALUE");

Makes sense?
It's not working :frowning:

You approach is right. but the option list still don't refresh in real time right?
The problem is the component refresh mechanism of retool. I think it should refresh the option list in the real time.

Hi @number15!

Can you elaborate on this step? I've added "NOVALUE" in the query results

Do you have a write query that adds "NOVALUE" to the underlying data source for the select component? If so, you should be able to re-trigger the select's data source query & see the option in the dropdown :crossed_fingers:

I'm curious if this helps at all --

In this screenshot, I'm typing 'Nik" which doesn't exist in my database yet, but I'm allowing custom values.

Then, on change (choosing a value or clicking enter), I trigger a database update query which adds "Nik" to my db. Then on success of that update query I re-trigger my database query that selects * values & refreshes the component. This ensures it'll persist in the dropdown list.

If I click enter, it picks the closest match depending on my search type, and then that will remain selected as these queries run. Based on the above screenshot for a fuzzy search, nike would be selected and if I click back into the component, "Nik" will appear as a dropdown item.

If I want "Nik" to remain selected through the process, I could create an event handler for that

Hi @Tess,

I don't remember what I tried to do :frowning: :innocent:
I think I tried to add "NOVALUE" in the array returned by the query through JS.

What I was trying to do it's not adding the input value if not exists, but add a specific value (eg. NOVALUE) for any input that doesn't exists in the list.
So, based on your example, "Nik" should return "Nike" options and NOVALUE at the end.

At the moment, I solved adding "NOVALUE" in first position with an UNION ALL in sql query and, if you want to select it when no results, you select it from the list in first position or using the search.

Thanks

1 Like

:grin: Apologies for the delay in circling back! Glad you have a way forward

The select component doesn't support writing directly to the data with JS, so you'll have to handle it on the resource query side.