Search bar not populating on mobile

Search Search UI React
1

I’ve created a locator using the FilterSearch component searching on builtin.location, and on mobile when a user types into the searchbar and selects an option from the dropdown, the search is conducted but the selection doesn’t populate the bar (typing “wash” and then selecting “Washington DC” searches for Washington DC but the bar still shows “wash”).

This has happened on multiple sites, here is an example: https://stxgwgc3od-121666-d.preview.pagescdn.com/search.html
username/password: test/test

2

Hey Michael,

Are you using the FilterSearch component directly from the search ui react library?
If so, are you making use of the onSelect prop?

If so, you might need to set your current filter to the selected one. If not, then the default behavior should be to display the selected filter and I can file a bug with our team.

If you could send over the code you are using for implementing the component that would greatly help us!

Best,

Daniel

3

Yeah I’m using the onSelect prop, same as the HH training

const handleFilterSelect = (params: OnSelectParams) => {
const locationFilter: SelectableStaticFilter = {
selected: true,
filter: {
kind: “fieldValue”,
fieldId: params.newFilter.fieldId,
value: params.newFilter.value,
matcher: Matcher.Equals,
},
};
searchActions.setStaticFilters([locationFilter]);
searchActions.executeVerticalQuery();
};

This was copied exactly from the HH training. Also the search bar populates as expected on desktop, the issue is only on mobile

4

We’re still having issues with this and I wanted to provide a screenshot of what we’re seeing

image
image906×788 60 KB

5 
      <FilterSearch
        onSelect={handleFilterSelect}
        placeholder="Find Banks and ATMs Near You"
        searchFields={[
          {
            entityType: "location",
            fieldApiName: "builtin.location",
          },
        ]}
      />

Here is my FilterSearch component

6

Hey team, thanks for sending this over. It looks like there’s an issue with the onSelect prop in the FilterSearch component. Our engineering team is taking a look at it, and I can keep you updated with a fix.

In the meantime, if you don’t use the onSelect prop, you will get the desired functionality.

Best,

Daniel

1 Like
7

Thanks for the update! How could we implement this without using the onSelect prop

8

The component should update the static filters state by default when not using the onSelect prop. If you remove the prop, are you not seeing expected behavior?

9

Removing the prop worked, thanks!

10

After removing the onselect prop, where should I get the params for the filter?

    fieldId: params.newFilter.fieldId,
    value: params.newFilter.value,

These values come from the OnSelectParams, is there a way to get them without using the onSelect prop?

11

You shouldn’t need to get them at all! The component handles setting the filters state and executing a query for you (if the searchOnSelect prop is set to true). You can also use the ApplyFiltersButton component if you don’t want the search to run automatically upon selecting a filter.

12

When I add the searchOnSelect prop it says its deprecated. I would also like to use the regular onSelect prop, so let me know whenever the product engineering team fixes the issue with the ext populating!

13

I recommend using the ApplyFiltersButton component in the meantime. I’ll keep you updated on progress from our engineering team! I imagine it will still be a couple of weeks before we get to it.

Best,

Daniel

1 Like