Hover state is true even if element is disabled

[braposo]

I think this was meant to be fixed with #689 (which was released in the 0.17.2 version) but it's still triggering the :hover state on disabled elements.

Simple fiddle: https://jsfiddle.net/b8ve7ybx/4/

Just click on the check box to disable the button and hover it.

You can see that if the button is disabled the hover state is still triggered which causes the :hover style to be applied when the button is enabled again, even though you're not actually hovering it.

I'm not sure if it's the same issue as #527 but just thought it'd be worth mentioning.

[TigerC10]

We're seeing this in our app as well.

👍 for a fix.

[StarkMike]

👍

[dancherb]

I'm programmatically disabling some components in a custom way (e.g. setting opacity when meant to be disabled), and this causes the bug as well - when disabling it in this way, it stays on the hover style until rolling over it. Would be good for a fix to address this or for there to be a nice workaround.

[tonyhallett]

This is not a radium issue but a browser issue according to mouseenter fires on disabled inputs whereas mouseleave does not.

So in the case of the example provided by @braposo - where we disable then hover ( mouseEnter raised ) then leave - there is no mouseLeave event raised in the plugin.

As mentioned in the react issue there is a css workaround button[disabled] { pointer-events: none; } but that does not always provide the result we require.

An alternative is to fake the button ( and how it responds when disabled ) providing a data- attribute for example data-disabled and to change the resolve-interaction-styles-plugin to consider it.

class FakeButton extends React.Component<{},{disabled:boolean}> {
  constructor(props:any) {
  	super(props);
        this.state = { disabled: false }
  }
  
  getStyles() {
    return {
    	backgroundColor: "red",
        border: 0,
      
      ":hover": {
      	  backgroundColor: "blue",
      },
      
      ":disabled": {
          backgroundColor: "green",
          color:'gray'
      }
    };
  }
  
  render() {
    return (
    	<div>
        <span onClick={()=>!this.state.disabled&&window.alert('clicked')} key="button" style={this.getStyles()} data-disabled={this.state.disabled}>Test button</span>
        <input type="checkbox" onChange={(ev) => this.setState({ disabled: ev.target.checked })} />
        <div>
        	Button hover state: {Radium.getState(this.state, 'button', ':hover') ? "hovered" : "not hovered"}
        </div>
        
      </div>
    );
  }
};

const TestingFakeButton = Radium(FakeButton);

resolve-interaction-styles-plugin

let disabled=false;
  if(props.disabled!==undefined){
    disabled=props.disabled;
  }else if(props['data-disabled']!==undefined){
    disabled = props['data-disabled'];
  }
  var interactionStyles = disabled ? [style[':disabled']] : ........