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") }
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.
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.
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
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
I don't remember what I tried to do
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.