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