How to keep the state when using ais-configure to update aroundLatLng

Hello. I’m using Vue instantsearch and I’m having issues with ais-configure. I’m trying to have the results sorted based on proximity so I’m using ais-configure to specify the aroundLatLng parameter:

<ais-configure
    :distinct="true"
    :around-lat-lng.camel="coordinates"
    :around-radius.camel="around_radius"
    :hits-per-page.camel="10"
/>

Wit the following initial data:

data() {
	return {	 
	  coordinates: "",
	  around_radius: "all",
	}
}

Once the component is created, I get the user’s location and update the coordinates:

created() {
	this.$getLocation().then((coordinates) => {
	
	  this.coordinates = `${coordinates.lat},${coordinates.lng}`;
	 
	});
},

This in turn updates the coordinates supplied to ais-configure. This is where the issue occurs because it replaces whatever filters are specified via query parameters when the coordinates is updated.

Here’s the demo: https://codesandbox.io/s/compassionate-chaplygin-p9bxj
You can try it out by toggling the comment on this line of code:

this.$getLocation().then((coordinates) => {  
	// this.coordinates = `${coordinates.lat},${coordinates.lng}`;
});

You can see the issue in action by https://p9bxj.csb.app/search/?query=tokyo&person_capacity=1%20guest. This works if this.coordinates is commented out. But when you bring it back, it automatically resets the URL back to just https://p9bxj.csb.app/search/?query=tokyo

What should I do so this doesn’t happen?

Thanks!

Hi there,
The reason why person_capacity disappears from the URL is not related to the coordinates.

When InstantSearch parses the URL and map the routeState into uiState, it doesn’t know about person_capacity, and it’s ignored. And the uiState without person_capacity is used again to build a URL and in the end the URL doesn’t have person_capacity.

I’ve modified your example a little bit.

I’ve added

<ais-refinement-list attribute="property_type" />

Now this app has a facet named property_type. And if you visit

https://t1zb1.csb.app/?query=tokyo&refinementList%5Bproperty_type%5D%5B0%5D=Apartment

this URL, then the app will take query and refinementList[property_type][0] into account and it will show the refined search results and the URL will remain.

In this sample index, the attribute person_capacity is not configured as a facet. So you cannot use it with ais-refinement-list. That’s why I made an example with property_type.

Let me know if this makes sense to you or if you have any question.

Thanks @eunjae.lee!
This made me realize what the problem really is with my code. I have a custom search box and it was structured like so:

<ais-search-box> 
   <my-custom-search-field />
   <ais-refinement-list attribute="category">
</ais-search-box>

The real reason why it was resetting was because <ais-refinement-list> is nested inside <ais-search-box>.

1 Like

Yes, you’re correct. Glad you found it out :slight_smile:
Let us know if you have any other question!