Widget refinementList - Color.label (name,hexacode)

Following this question and anwser

Now have my color widget read the attribute color.label as follow:

search.addWidget(
instantsearch.widgets.refinementList({
  container: '#color_filter',
  attribute: 'color.label',
    templates: {
    item(hit) { return `
      <button class="btn" group="colour" onclick="optionSelected({'type':'colors','name':'${hit.label.split(',')[0]}'})" initialized="1"><span 
      ${ (`${typeof hit.label.split(',')[1]}` != 'undefined') ?
          `style="background:${hit.label.split(',')[1]}"` : ''}
        ></span>${hit.label.split(',')[0]}<strong>${hit.count}</strong></button>
      `;
     }		
  },
})
);

and in my personalized search widget in the init have as follow to filter by the color.name instead of color.label:

  search.addWidget({
  init(opts) {
      const helper = opts.helper;

      opts.state.disjunctiveFacets.push('color.name');

...

      (typeof historyState.colors != 'undefined' ? historyState.colors.split(',').map( param => {
        if(param != ''){
          helper.addDisjunctiveFacetRefinement('color.name', decodeURIComponent(param));
        }
      }) : '') ; 

  helper.setQuery((typeof GetURLParameter('search') != 'undefined' ? GetURLParameter('search') : historyState.search)).search();

and it filter’s well but now since the widget of color look’s at the attribute of color.label instead of color.name it doesn’t appear with that option as selected.
How can I make it appear as selected now that I making the search by parameter color.name?

A post was merged into an existing topic: Widget refinementList - Color (name,hexacode)