DynamicWidgets - Making Searchable "True" makes widget no longer dynamic

If we set searchable to “true” on a Dynamic Widget, then the search bar remains, even if the widget should disappear. This seems to defeat the purpose of a dynamic widget. Is there a way to fix this? This is using instantsearch.js with plain old html (no React framework, etc).

Hey Jonathan, I’ve grabbed this one, but I’m going to need to set it up to understand what’s going on. You don’t happen to have a codesandbox demonstrating this do you? Otherwise give me some time to build out a demo – I honestly haven’t played with Dynamic Widgets myself yet.

I’d be happy to build a code sandbox for you. However, what do they say, a picture is worth a thousand words?

My understanding of Dynamic Widgets is that the whole point is that you can have entire widgets appear or disappear, depending on the context of the search. So for a search for pet food, you can have a widget that says “organic”, “gluten free”, “cat”, “dog”, etc. If you then search for a cell phone, you might get a widget for screen size instead.

This does indeed work, however if you want to search within a widget, the search box will not disappear, even if the widget should (because a specific search returns no results for that facet). So that’s what you’re seeing in the picture below. For example, this is the top of the “widgets” array, which contains all the widgets to display on the screen when it is contextually appropriate. The issue is really with the header panels, which show the title for each widget, and with the search box to search inside each widget. Even if the widget is supposed to disappear, the search box and header title panel still stick around. I’d like to figure out how to eliminate this behavior (it seems that perhaps Dynamic Widgets is a new feature, and these things haven’t really been considered yet).

I’ll send you the code sandbox once it’s ready.

container: ‘#dynamic-stock’,

maxValuesPerFacet: 100,

widgets: [

container =>

instantsearch.widgets.panel({

templates: { header: ‘DECIMAL THICKNESS’ },

})

(instantsearch.widgets.refinementList)({ container, attribute: ‘xrefs.DECIMAL’, searchable: true, searchablePlaceholder: ‘Search decimal’, showMore: true, showMoreLimit: 100, templates: {showMoreText: `

{{#isShowingMore}}

Show less

{{/isShowingMore}}

{{^isShowingMore}}

Show more

{{/isShowingMore}}

`, } }),