Radium: Elements that are hidden when in the hover state come back with the hover state active

Created on 13 Jan 2016 · 16Comments · Source: FormidableLabs/radium

E.g. if you have some hover styles on a button. And when you click that button the button is hidden. When the button comes back since it never got the onMouseLeave it comes back with the hover state active.

JSBin

https://jsbin.com/yesisoxiti/1/edit?html,js,output

Code

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
<script src="//fb.me/react-0.13.1.js"></script>
<script src="https://npmcdn.com/radium@latest/dist/radium.js"></script>
  <meta charset="utf-8">
</head>
<body>

</body>
</html>

// noprotect

var style = {
   ':hover': {
       background: 'red'
   }
};

@Radium
class App extends React.Component {
  constructor(){
    super();
    this.state = {
      shown : true
    };
  }
  render() {    
    return(  
      <div>

        <button key={1} onClick={()=>this.setState({shown:true})}>
          Show
        </button>    

        { this.state.shown &&
          <button key={2} style={style} onClick={()=>this.setState({shown:false})}>Hide</button>
        }

      </div>
    );
  }          
}

React.render(<App/>, document.body);

Demo

onhide

:rose:

bug

Source

basarat

👍3

Most helpful comment

I am running in to this issue as well, I was thinking maybe there could be an API call we could make like radium.clearHover() that clears all current hover state. It's a workaround, at best, but could be useful.

yrokhlin on 4 Feb 2016

👍6

All 16 comments

Thanks for the easy repro! The problems with onMouseLeave are a known issue, but in this specific instance we should be able to clear out the state when an element is no longer rendered. I can't think of a pretty way to do this yet, but it seems doable.

ianobermiller on 14 Jan 2016

yrokhlin on 4 Feb 2016

👍6

Any updates on this bug? Currently I am having to implement my own hover with state and the associated event handlers.

rcoy-v on 8 Feb 2016

I just hit this bug today. Any update?

bcardi on 2 Apr 2016

Hey all, no progress on this one to report. Radium might start using generated CSS for pseudo-classes (see https://github.com/FormidableLabs/radium/issues/510), which would resolve this, but that's not in progress either. Ideas and PRs are obviously welcome in the meantime, but apologies for the inconvenience.

alexlande on 2 Apr 2016

How difficult would it be to add a Radium.setState() with similar syntax to Radium.getState()?

If I could just manually remove the :hover state that would at least let me fix this until a better solution came along...

TheTedAdams on 28 Aug 2016

👍2

I just hit this bug today. I had to put onMouseEnter and onMouseLeave events on the element and apply the styles that way. Would be nice to get a fix for this soon..

simonmathay on 12 Feb 2017

I hit this bug on a dropdown select component which was keeping the hover state between open->close->open. Changing the keys at the point where you'd otherwise want a radium.clearHover() seems to be a hacky workaround that works for my use case. In my case when I toggle the isOpen state of the component.

    toggleIsOpen = () => this.setState({
        isOpen: !this.state.isOpen,
        keyHash: Math.random(),
    })

    render() {
        ...
        const menuOpen = (
            <div>
                {options.map(option => (
                    <div key={`${option.value}${keyHash}`} onClick={...} >
                        {option.label}
                    </div>
                ))}
            </div>
        )
        ...
    }

chris-cooper on 6 Mar 2017

Also ran into this issue.

rovolution on 2 May 2017

Surprised this is still an issue - :hover was one of the main reasons I wanted to use radium

sweetLew2 on 5 Jun 2017

👍2

@sweetLew2 check out React Interactive, it's not a full style library like Radium, but handles hover/active/focus interactive states with no such issues.

rafgraph on 5 Jun 2017

For anyone having this problem, Radium state is saved on the component state as '_radiumStyleState'. You can manually change it like this:

this.setState({ _radiumStyleState: { 'componentKey': { ':hover': false }}});

I'm not sure if this a good approach since it would be easy to have a Radium.setState to do this, so there must be a good reason to not manually mess around with Radium state. For now it worked as expected without side effects.

Just remember that setting the state will trigger all React life cycle methods, including render, so be careful where you trigger this.

thales-gaddini on 9 Sep 2017

@thales-gaddini, _radiumStyleState is not updating when I do a this.setState({ _radiumStyleState: [...] }).

Have you tested this solution?

UPDATE: It works temporarily. When I interact with the parent element again it reverts back to it's original site before I did the setState.

austincondiff on 1 Dec 2017

@acondiff for now it is working as expected for my use case. As I stated before, there must be a good reason to not manually mess around with Radium state since it would be easy to have a Radium.setState, maybe that's one of those reasons.

thales-gaddini on 4 Dec 2017

@thales-gaddini Any idea why it is reverting back? Like I said, I do a this.setState({ _radiumStyleState: [...] }), it removes the hover state, but when I hover over anything else in it's parent, the element's hover state that I set to false, goes back to true. It is like there is source object somewhere that is persisted to the components state. When I did the setState, it changed the components state, but as soon as Radium changed the state and the source Radium object updated, it persisted the object to the components state, overwriting my changes to _radiumStyleState on the components state.

austincondiff on 6 Dec 2017

@acondiff not sure if you still have the problem. I'm not related to the Radium team, so I didn't dig deep into the code to see why there isn't a setState, and have no idea why this is happening in your project, but I could help you if you have a repository I could check. You can send the repository to thales.[email protected] to avoid further messages here.

PS: sorry, I'm a working student and had to present a project this week so I was focused the presentation.

thales-gaddini on 22 Dec 2017

Was this page helpful?

0 / 5 - 0 ratings