Get Rid of "All" at end of NumericMenu List

Hi, I’m just wondering if there is a way to get rid of the “All” option at the end of the NumericMenu. I’m using a Custom Connector and that labels are getting sent as numbers which is essential because it’s displaying the refinements as stars such as “Greater than 1 Star, Greater than 2 Star” for reviews very similar to Amazon. However, the “All” label gets sent as a string and I can’t seem to be able to disable it.

The All gets added indeed when there’s no '' value in your data yet here: https://github.com/algolia/react-instantsearch/blob/master/packages/react-instantsearch-core/src/connectors/connectNumericMenu.js#L158-L165

The solution is to use transformItems to filter it out:

<NumericMenu
  items={[
    { label: '<= $10', end: 10 },
    { label: '$10 - $100', start: 10, end: 100 },
    { label: '$100 - $500', start: 100, end: 500 },
    { label: '>= $500', start: 500 },
  ]}
  transformItems={(items) =>
    items.filter((item) => item.value !== '')
  }
  attribute="price"
/>

this also works with connectors. Here’s a sandbox: https://codesandbox.io/s/shy-shape-trz1g?file=/src/App.js

1 Like

We add the “All” value to make sure that once you refine, you’re still able to go back to a search state without refinements, so make sure to not trap people into a certain range by also having a clear button on the page

1 Like

Thank you, that was the solution. I did add a Clear button as well.

1 Like