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.
Appreciate any thoughts from the community
Yes, I also think the Select component should keep the user input.
Maybe you can push a feature request?
A workaround is to save the input's value into
variable or localStorage in change event.
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):
Thanks for the suggestion, @Tess!
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.
You can view a recording of the issues here.
Any other suggestions for making it work? I don't suppose there is a search/autocomplete component in the works?
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
I don't have any other workaround ideas, unfortunately Unless you can find a solution with storing the value in a variable or local storage
You might be able to create a custom React component that has the behavior you're looking for
Here is my workaround, just put the inputValue to variable. and refer it in defaut value.
And add the event handler to focus.
don't forget to set denounce
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?
It should be considered as a bug.
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