RefinementList not updating its underlying item DOM

[redox]

After refining on one of the items of the RefinementList, the CSS rule I put in place to highlight the refined item was not applied. Funny thing is as soon as I move the cursor hover the item, my CSS rules applies.

We're currently rendering the items of a RefinementList using:

      <div
        className={cssClassItem}
        key={facetValue[this.props.facetNameKey]}
        onClick={this.handleClick.bind(this, facetValue[this.props.facetNameKey])}
      >
        <Template data={templateData} templateKey="item" {...this.props.templateProps} />
        {subList}
      </div>

Changing the key to facetValue[this.props.facetNameKey] + '/' + facetValue.isRefined + '/' + facetValue.count fixes the issue.

[pixelastic]

I guess React is not re-rendering the item because the key stays the same. @bobylito maybe you have a better React-based explanation?

[bobylito]

OH that's where the tweet came from :P

From what I understand of the context, I would say that it's a combination of using string template with the fact we're not updating the key. From what I understand, what's inside the dangerouslySetInnerHTML is considered a blob thus not interpreted, so it won't count in the diff algo against the generated vdom.

When we change the key, we are changing what properties are hold in the vdom. So it is considered different and so the rendering is updated.

[bobylito]

Oh but I may be wrong. It seems that it's a bug in React facebook/react#377 The solution/workaroud you provided seems legit...

[vvo]

Ok indeed: facebook/react#377 (comment)

we should use the fix you proposed @redox

[vvo]

Strangely if we read facebook/react#1232 it should be fixed hmm