Issues with the new Panel widget

I’m having trouble with the new panel widget.

Widget code before:

var searchFiltersBrand = instantsearch.widgets.refinementList({ 
  container: '#brand_filter',
  attribute: 'brand',
  operator: 'or',
  limit: 10,
  searchable: true,
  showMore: true,
  templates: {
    header: 'Brand'
  },
  autoHideContainer: true,
  collapsible: { collapsed: true },
  transformItems: refinementListFunction,
  cssClasses: {
    root: 'rootClass',
    header: 'headerClass',
    body: 'bodyClass',
    list: 'listClass',
    item: 'itemClass',
    active: 'activeClass',
    label: 'labelClass',
    checkbox: 'checkboxClass',
    count: 'countClass',
  }
});
search.addWidget(searchFiltersBrand);

Widget code after the addition of panel:

var searchFiltersBrand = instantsearch.widgets.refinementList({ 
  container: '#brand_filter',
  attribute: 'brand',
  operator: 'or',
  limit: 10,
  searchable: true,
  showMore: true,
  transformItems: refinementListFunction,
  cssClasses: {
    root: 'rootClass',
    header: 'headerClass',
    body: 'bodyClass',
    list: 'listClass',
    item: 'itemClass',
    active: 'activeClass',
    label: 'labelClass',
    checkbox: 'checkboxClass',
    count: 'countClass',
  }
});
search.addWidget(searchFiltersBrand);

var widgetPanel = instantsearch.widgets.panel({
  templates: {
    header: 'Brand'
  },
  hidden(options) {
    return options.results.nbHits === 0;
  },
})(instantsearch.widgets.refinementList);

var myWidget = widgetPanel({
  container: '#brand_filter',
  attribute: 'brand',
});
search.addWidget(myWidget);

The are the changes that I’m having issues with:

  1. autoHideContainer was removed and replaced by the hidden option in the panel widget.

My refinementLists are hiding if there are no results, with or without this set. My other widgets – rangeInputs, toggles, and numericMenus – are not. What was the function used to hide widgets before? I believe it was more than just nbHits === 0 but I cannot find it. I believe it worked well.

  1. collapsible: { collapsed: true } was removed and apparently moved to the panel widget.

Does this still work in it’s old form, or do I now have to implement my own way to collapse a widget? I thought that maybe I could use the hidden option to hide/unhide, but if hidden === true then the header/title is also hidden, which is not what I’m looking for.

  1. The panel widget seems to override my CSS classes.

When I add a refinementList to a panel, then all cssClasses from the refinementList are ignored. In my example posted above, my list items no longer receive the listClass CSS class after they are wrapped in a panel widget.

  1. Both the searchable and showMore options in the refinementList seem to be overridden as well.

When wrapped in the panel, neither of these options shows any longer.

Sorry for not initially adding in a sandbox. Here is an example highlighting issues 3 and 4:

When the panel is removed (comment out lines 56~61), my very beautiful CSS is added to the refinementList. The “Show More” and “Searchable” features are also disabled by the panel widget.

Hi @kevin2,

Thanks for the example it helps a lot.

  1. autoHideContainer was removed and replaced by the hidden option in the panel widget.
  2. The panel widget seems to override my CSS classes.
  3. Both the searchable and showMore options in the refinementList seem to be overridden as well.

Yes, those issues comes from the fact that the widget is not instantiated correctly. You can take a look at the example, I’ve updated the code to match the expected usage.

const refinementListWithPanel = instantsearch.widgets.panel({
  templates: {
    header: 'Brand',
  },
  hidden(options) {
    return options.results.nbHits === 0;
  },
})(instantsearch.widgets.refinementList);

search.addWidget(
  refinementListWithPanel({
    // those options are provided to the RefinementList
    container: '#brand-list',
    attribute: 'brand',
    // ...
  })
);
  1. collapsible: { collapsed: true } was removed and apparently moved to the panel widget.

Yes this option has been removed, you have to implement your own way to collapse a widget. We drop the usage of this option because it can be implemented in user-land. It’s the first time since we release that we have a feedback like this one. The migration guide is not correct though we’ll update it.

Hope that helps, let me know if you have questions.

2 Likes

Ah, I see. It looks like I completely misunderstood how the widget is to be implemented. :sweat_smile:

I thought this may be the case, but the migration guide specifically says that the functionality was moved to the new widget and so I wanted to be sure.

Thanks for the help. Everything is working as expected now. :slight_smile:

1 Like

Hi @samuel.vaillant,

Sorry but the solution you give for question 1 is not working for me.
options.results.nbHits don’t care about attribute of the refinement.

AutoHideContainer was designed to hide the container based on the refinement attribute.
For example :

  • My search could have 10 hits of offers.
  • I have a refinement based on the discounts applied to each offer. (for example Promo, Solde, Flash)

Now imagine we don’t have discounts applied on this 10 hits, so my container don’t have to show up but with your solution the container still show up and the header too (although there is no refinement).

I think panel is interesting when you have multiple refinements with the same header but when you just have one, algolia over complicated things…
On my search page i have 6 differents refinements and it’s a pain in the ass to add one panel for each refinement.

Thanks for your help