Instantsearch.js: menuSelect Widget: hide when only one option (other than seeAllOption)

[davist11]

Describe the bug 🐛
When using a menuSelect widget, if there is only one option (other than the seeAllOption), this widget should be hidden since selecting that single option is the same as selecting the seeAllOption

To Reproduce 🔍
Steps to reproduce the behavior:

1. Add a menuSelect widget that will only have one option
2. See that selecting that option is the same as the seeAllOption

Expected behavior 💭
If there is only one option other than the seeAllOption this widget should be hidden.

Screenshots 🖥

[bobylito]

Thanks for the feedback. We're actually looking for revamping the conditions for the autohideContainer feature.

[davist11]

Is there any timeline for v3.0?

[bobylito]

Not at the moment @davist11

[davist11]

👍

do you have any suggestions for how to handle this issue with the current version?

[bobylito]

The most straightforward and hacky way would be to use the helper, listen to the result event, check if there is only one value returned and hide the container of your menu:

const search = instantsearch(/* config */);
// ...
search.start();
search.helper.on('result', (results) => {
  const values = results.getFacetValues('yourMenuFacet');
  if(values.length <= 1) hide();
  else show();
});

https://community.algolia.com/algoliasearch-helper-js/reference.html#SearchResults#getFacetValues

[davist11]

Awesome, thank you.

For reference for anyone else who needs something like this, I had to update the conditional like so:

if (Array.isArray(values.data) && values.data.length <= 1) {
    hide()
} else {
    show()
}

[francoischalifour]

Since InstantSearch.js 3, you can use the panel widget like this:

const brandMenuSelect = instantsearch.widgets.panel({
  hidden: ({ results }) => results.getFacetValues('brand').data.length <= 1,
})(instantsearch.widgets.menuSelect);

search.addWidget(
  brandMenuSelect({
    container: '#brand-list',
    attribute: 'brand',
  })
);