Changing refinementList's buttonClassName if "refined" in createDropdown()

new to algolia and instantsearch, i’ve got a working demo up.

when styling my facets, i notice the rangeInput widgets change text and get bold when the facet is changed, this is done with the buttonClassName function in createDropdown. I’d like to do the same if any of the refinementList facets are checked. Unfortunately the buttonClassName function doesn’t supply me with the “start” value, so i don’t know how to determine if any of the refinementList values are checked.

const categoriesDropdown = createDropdown(instantsearch.widgets.refinementList, { 
	closeOnChange: true,
	buttonText({ start }){
		return 'Type';
	},
	buttonClassName({ start }){
		/** start is undefined a this point **/
		const isRefined = (start && start[0]);
		console.warn('cats isRefined', isRefined);
		return isRefined && 'ais-Dropdown-button--refined';
	}
});

const yearDropdown = createDropdown(instantsearch.widgets.rangeInput, {
	buttonText({ start }){
		const s = (start && Number.isFinite(start[0]) ? start[0] : '');
		const e = (start && Number.isFinite(start[1]) ? start[1] : '');
		return (s || e ? `Years ${s} ~ ${e}` : 'Year');
	},
	buttonClassName({ start }){
		const isRefined = Number.isFinite(start && start[0]) || Number.isFinite(start && start[1]);
		console.warn('year isRefined', isRefined);
		return isRefined && 'ais-Dropdown-button--refined';
	}
});

all i was able to find was this:

…and from what i can tell the input parameter should be set if a refinementList value was checked?

i figured out this, i discovered if i replaced “start” with “items”, i am suddenly getting something close to what i wanted. Unfortunately instead of just supplying with the items that have been refined, it gives you all the items available, and each item has an “isRefined” variable.

here’s what i did:

const categoriesDropdown = createDropdown(instantsearch.widgets.refinementList, { 
	closeOnChange: () => window.innerWidth >= MOBILE_WIDTH,
	buttonText({ items }){
		let refined = [];
		items.forEach( (item) => { if(item.isRefined){ refined.push(item.value); } } );
		let output = 'Type';
		if(refined.length > 0){ output += ' ('+refined.length+' selected)'; }
		return output;
	},
	buttonClassName({ items }){
		const isRefined = (items || []).find(
			(item) => item.label !== 'All' && item.isRefined
		);
		if(!isAnyFilterRefined){ isAnyFilterRefined = isRefined; }
		return isRefined && 'ais-Dropdown-button--refined';
	}
});
1 Like