"Add new" link to empty state in Listbox?

[anf]

I have a Listbox mapped to a list of locations loaded via a resource query. I'd like to give the user the option of adding a new location when zero options match the search. Is there a way to add a link to the empty state of the Listbox field?

Example:
Option 1 - Olympia
Option 2 - Seattle
Option 3 - Tacoma

Listbox search value, "Everett" matches zero results.

Add link "Add New Location" to empty state of Listbox which would link to a form in a modal or on a new page.

[ScottR]

@anf

1. I would show a modal button only if the search result is empty.
2. Add the form in the modal, and upon Success of that form's submission, you would then call the same resource query that populated the original listbox; The listbox will then show the additional Location the user has entered.
3. Add an Event Handler to close the modal upon Success of the form submission.

[anf]

Thanks for your help, @ScottR. My apologies. I meant the Select component. I'd like to put a link or button in the empty state area when the query string within the Select component is unmatched.

Is there a state variable that references the empty state of the Select component. Maybe I can access that in order to show/hide a button?

[ScottR]

If I understand your question correctly:

If select2.value != null hide the modal button (the modal button in this case would be the button to open a modal containing the form. If the option is not found, the select is not selected and the modal button will appear.

[Kabirdas]

Hey there! If you turn on "Allow custom values" for your select component you can also do some logic that runs when a user has hit enter on a value that's not currently in the list.

This could either be to show a button, like Scott mentioned, with something like {{select1.values.includes(select1.value)}} or to fire an event handler that opens the modal itself: