Radium: _radiumStyleState was reset during hovering

[dyguan372]

I have a component which shows or hides text according to the result of Radium.getState(). It stopped working after I upgraded Radium from 0.18 to 0.24. I tried to debug into it and found _radiumStyleState was reset right after :hover became true, which caused the second rendering and hid the text.

I have created a small project with a workaround to reproduce this problem:
https://github.com/dyguan372/HoverTest

Could you please take a look? Thank you!

[macrozone]

I experience the same problem with radium 0.24.1 (updated from 0.19.1)

[kylecesmat]

I'm attempting to debug this problem, I am able to reproduce using the repository provided, thanks for that.

It looks like this bug starts occurring at 0.21.0, which was created following this PR https://github.com/FormidableLabs/radium/pull/956

I'm not sure why this only occurs for the project you provided, and not for the project's own examples. In the reproduction provided, a re-render seems to be getting triggered, where on 2nd render the _radiumStyleState seems to be empty.

[kylecesmat]

I've narrowed in on a reproduce-able example. The bug occurs when the element you are hovering is the top-most parent in the component tree. I am able to reproduce this with the latest version of Radium from within the examples.

// Works as intended
class HoverMessage extends React.Component {
  render() {
    return (
      <div>
        <div key="button" style={{ display: "flex", ":hover": {} }}>
          Hover me!
          {getState(this.state, "button", ":hover") && <span>{" "}Hovering!</span>}
        </div>
      </div>
    );
  }
}

// Hovering triggers a re-render, which causes the `:hover` state to be empty
// and the `getState(this.state, "button", ":hover")` check to be false
class BrokenHoverMessage extends React.Component {
  render() {
    return (
      <div key="button" style={{ display: "flex", ":hover": {} }}>
        Hover me!
        {getState(this.state, "button", ":hover") && <span>{" "}Hovering!</span>}
      </div>
    );
  }
}

[kylecesmat]

I believe the issue is that currently the logic to erase/purge the state assumes that the first child element is not interacting with Radium & does not have a unique key.

In the BrokenHoverMessage above, if I change the key to 'main', the hover works as expected. It also works if I wrap the div with a React.Fragment component. Not ideal, but at least those are two ways forward and should allow you to upgrade.

I think we'll need a better way of checking if the current element we are removing the styles from is "Not the root element with a unique key" - https://github.com/FormidableLabs/radium/blob/master/src/resolve-styles.js#L368

[macrozone]

@kylecesmat i can confirm that the workaround with <Fragment> works