Problem in adding two range facets with the same options names but for different filters

Elastic Search
1

Hi,

I'm trying to add two range facets, the options in both of them are the same but it's for different filters.

something like this:

const installs = {

  type: 'range',

  ranges: [

    { from: 0, to: 101, name: '<= 100' },

    { from: 100, to: 501, name: '100 - 500' },

    { from: 500, to: 1001, name: '500 - 1000' },

    { from: 1001, to: 5001, name: '5k' },

    { from: 5001, to: 10001, name: '10k' },

    { from: 10001, to: 50001, name: '50k' },

    { from: 50001, to: 100001, name: '100k' },

    { from: 100001, to: 500001, name: '500k' },

    { from: 500001, to: 1000001, name: '1M' },

    { from: 1000001, to: 10000001, name: '10M' },

    { from: 10000001, to: 100000001, name: '100M' },

    { from: 100000001, name: '> 100M' },

  ],
}

const reviews = {

  type: 'range',

  ranges: [

    { from: 0, to: 101, name: '<= 100' },

    { from: 100, to: 501, name: '100 - 500' },

    { from: 500, to: 1001, name: '500 - 1000' },

    { from: 1001, to: 5001, name: '5k' },

    { from: 5001, to: 10001, name: '10k' },

    { from: 10001, to: 50001, name: '50k' },

    { from: 50001, to: 100001, name: '100k' },

    { from: 100001, to: 500001, name: '500k' },

    { from: 500001, to: 1000001, name: '1M' },

    { from: 1000001, to: 10000001, name: '10M' },

    { from: 10000001, to: 100000001, name: '100M' },

    { from: 100000001, name: '> 100M' },

  ],
}

And it will look like this in the browser:

image

The problem is that when I check one of the check-boxes, let's say the option named "<= 100" in "installs" facet, the other "<= 100" checkbox in "reviews" facet is also get selected.

If i changed the "name" value in the above code to different values for each facet it works fine (for example in installs facet it will be "<= 100" & in reviews facet it will be "<= 100 reviews")

Is there is any solution for this? can't we simply add 2 range filters with the same options names ?

2

Can you show me more code? Where are you using these 2 variables?

3

@JasonStoltz

I'm using these 2 variables in the Search Configs, like this:

image
image396×575 12.5 KB

And the installs facet code like the following:

image

And reviews facet code like the following:

image

And Thank you for the fast reply :slight_smile:

4

Try turning on Debugging. See what gets printed to the console when you select a facet value.

You should see something like:

Search UI: Action setFilter {Action Parameters}

The action parameters should contain the correct field name and value corresponding to the facet box you are using.

5

FWIW, I set up a similar scenario here with no problems: search-ui-national-parks-example (forked) - CodeSandbox. Specifically, with the square_km and acres fields faces.

See if you can reproduce your issue in that Sandbox!

6

@JasonStoltz

Thank you man. Your Sandbox solution was very helpful in solving my issue, It's solved now.

Much appreciated :slight_smile:

7

Glad it helped!