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:


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.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:
You can try it out by toggling the comment on this line of code:

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

You can see the issue in action by This works if this.coordinates is commented out. But when you bring it back, it automatically resets the URL back to just

What should I do so this doesn’t happen?


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

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:

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

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!