Material-ui: Hover issues with disabled buttons

[Kagami]

I experience several issues with disabled property of FlatButton and RaisedButton.

1. Hovering active button in the same row with disabled button don't trigger hover style.

I can reproduce it in both Firefox 40 and 43 but can't reproduce in Chrome.

Code:

  render() {
    return (
      <div style={{marginTop: 100, textAlign: "center"}}>
        <RaisedButton label="1" disabled/>
        <RaisedButton label="2" />
      </div>
    );
  }

Demo:

2. Moving mouse over disabled button make it hovered after enabling.

I can reproduce it in both Chrome and Firefox.

Code:

  enable() {
    this.setState({enabled: true});
  },
  render() {
    return (
      <div style={{marginTop: 100, textAlign: "center"}}>
        <FlatButton label="1" disabled={!this.state.enabled} />
        {' '}
        <RaisedButton label="2" onClick={this.enable} />
      </div>
    );
  }

Demo:

[mbrookes]

Similar issue to the second one here - I'm disabling a button in response the the user clicking that button (a delete button that is disabled when the selected items are deleted), but when the button is reenabled programatically (selection of additional items), the hover-state style from when it was disabled is present.

[Aside: @Kagami - how did you produce these animated gifs? They were perfect for me to see at a glance that it's the same symptom I'm seeing. Nice job!]

[Kagami]

how did you produce these animated gifs?

I'm using 3 sequential ffmpeg commands:

1. Grab the screen to lossless H.264

ffmpeg -f x11grab -show_region 1 -framerate 24 -video_size WxH -i :0+X,Y -crf 0 -preset fast -pix_fmt +yuv420p -y out.mkv

1. Generate palette

ffmpeg -ss SEEK -i out.mkv -t DURATION -vf crop=x=X:w=W,palettegen -y palette.png

1. Convert to gif

ffmpeg -ss SEEK -i out.mkv -i palette.png -t DURATION -lavfi '[0:v]crop=x=X:w=W[a];[a][1:v]paletteuse' -y out.gif

(I adjust some options/add other filters depending on the encode of course.)

Probably not ideal, but it works good enough for me.

[lynndylanhurley]

I'm seeing this issue as well.

[mikechabot]

Once a button returns from being disabled (i.e. no longer disabled), the styling appears as though a user is hovering on it. That said, if you do hover over the button, then move the cursor away, the button returns to the appropriate classing (i.e. primary={true})

[orporan]

I'm seeing the same issue

[iofjuupasli]

Tooltip doesn't dissapear for IconButton after mouseleave.

Workaround is to use own class to style button as disabled instead of disabled property

[tintin1343]

@Kagami @orporan : were you able to solve the issue using the above suggestion? Do let us know.

[mwildehahn]

I'm seeing something similar to this.

I have a button which when clicked, gets disabled and opens a form. When the user submits the form, the button is re-enabled. When the button is re-enabled, hover is still set to true. It looks like this is happening because the hover state is unset within onMouseLeave, but if the button is disabled while you're still hovering over it, onMouseLeave will never be called.

I think having a componentWillReceiveProps func that does something like:

if (nextProps.disabled && this.state.hovered) {
  this.setState({ hovered: false })
}

would fix the weird behavior.

I can't think of a case where the button is disabled, but you still want to maintain an internal hovered state.

[mbrookes]

Closed by #4626

[cjnaude]

Both of these issues seem to still be present in 0.18.7. Did #4626 not fix second issue at least?