Make entered text in search of mobile select accessable as attribute of component

Hi there!

I'm making a mobile app where a user needs to select from a single item of around 5000 options fetched from a server with pagination. I can pass a search query to the server as well.

It would be amazing if I could access the text that has been entered in to the search in the select so I could pass it with the network request to dynamically update the visible options. Instead of needing to fetch every option or build a custom search page.

Hello @Kevin2!

If you are using a 'search' component, you can access the value inside of it with {{searchbar1.value}} !

Are you looking to access the value from the select component? You can do that with {{select.value}} as well.

Let me know if those do not work for you, I might need a screenshot of the components to better understand how best to assist :sweat_smile:

Hey Jack,

The search component is a bit clunky with the select, as the user needs to enter a search term then open the select (which has the slide out to show the options), then, if what they want hasn't been returned, close the slide out and edit the search term.

The slide out for the select has a built-in search bar that appears when there are lots of options. It would be great if we could access the text that has been entered into that search bar so we could pass it to our server to fetch new options for the select to display (and then update those options while the slide out is still visible).

Hi @Kevin2,

Thank you for elaborating! I see the search bar in the select, that is very odd that the value entered is currently not accessible in the component's state :sweat_smile:

I can make a feature request for that right now, will let you know any updates I hear about it :+1:

Great news!

The engineering ticket for this issue has its status updated to complete. It should be going live on cloud with our newest version when that comes out :+1:

Really appreciate it @Jack_T! I look forward to updating our app!

1 Like

Hey @Jack_T

I've finally gotten to give it a go, and it works. But when I change the data for the select, the slide out closes while the resource is fetching.

So, I have a resource which fetches the data to show in the select, my resource has a search parameter and enforces pagination. I want to tie the serchTerm in the select to the search parameter of my resource

So the idea I have is to fetch the first 50 options to show in the select, then as the user searches, my resource will re-fetch options and then provide a reduced list to the user as they search

But right now, as soon as the user enters something, the slide up closes and the select goes in to a loading state, so the user has to wait for the resource to finish fetching, re-open the slide up, enter another letter. Then wait for the next fetch to finish.

I would like for the slide up to remain open so the user can continue typing. Then just the options that are displayed in the slide up can enter a loading state.

Also, once the list gets short enough, the search gets hidden. Is there some-way to force the search to always show?

Thank you so much! I know I'm asking a lot, but I think this will be a nice unlock for when users need to select from a long list of server fetched options.

Hi @Kevin2,

Yes, we can put that request in as well. It may be a longer timeline, but we'll follow up here when our team ships a fix