Widget refinementList - Color.label (name,hexacode)

Following this question and anwser

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

  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]}"` : ''}

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

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



      (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)