I have a Select component which I'm hoping to repurpose as a "search + autocomplete" component. My hope is to dynamically populate the data source via a database query that is triggered by the select.inputValue change, and then displays the database query results as options for the select component.
I have the querying and data mapping part figured out. What I'm struggling with is persisting the inputvalue if I don't select an option but click outside of the input field. I'd love that input to always display the text that was entered until it is either manually removed by the user or an option is selected. GIF of the current behaviour below. Note how the search term "test" is cleared when the input is no longer in focus.
Anyone got any suggestions. I'm also open to suggestions on a better way to handle the search+autocomplete functionality. The Select component seems like the best fit out of the components I've tried and I've seen it recommended for autocomplete in this forum.
Thanks, @AnsonHwang! I can try a workaround for sure. I just hope something like this could be added as a config option for the component itself. In the meantime, I'll explore some workarounds
We have a feature request for methods to set the input value and clear the input value. I don't believe the team is currently working on this request, but I can post back here if they're able to ship a fix
I think you can solve this by setting the default value to the input value
You could also make this conditional based on whether there is an inputValue defined yet
However, this does appear to select the value (so, if you wanted it to save custom values that don't have matches in the select, it would only work if you allow for selection of custom values):
Unfortunately, this results in unusual behaviour. As I type, the options for the select seem to disappear but the tool tips show up when I move the cursor to where they should be. Clicking away from the Select component and then clicking into it will display the results. Also, if I type an exact match for one of the values, then the options appear but the input is removed.
We have a feature request for an autocomplete component as well! I'll let the team know that someone from the community is requesting this, but as far as I can tell it's not on our immediate roadmap
It seem some thing related to the event. Maybe retool change inputValue all the time in the change event, and every time the default value was set when inputValue change, the change of default value will result the option list disappear?
Thank you both for the suggestions. I was able to get something working using most of what @AnsonHwang suggested, plus a couple of tweaks specific to my App's UX. I did change the event handler config to blur instead of focus so the default value updates as soon as the input is no longer focused
Unless you can find a solution with storing the value in a variable or local storage
