Merge pull request #4951 from dugokontov/cancel-hover-on-disable-for-…

…floating-action-button

[FloatingActionButton] Reset hover state when disabled prop is changed

src/FlatButton/FlatButton.js

@@ -118,7 +118,7 @@ class FlatButton extends Component {
   };
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.disabled && this.state.hovered) {
+    if (nextProps.disabled) {
       this.setState({
         hovered: false,
       });

src/FloatingActionButton/FloatingActionButton.js

@@ -164,11 +164,16 @@ class FloatingActionButton extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
+    const nextState = {};
+
     if (nextProps.disabled !== this.props.disabled) {
-      this.setState({
-        zDepth: nextProps.disabled ? 0 : this.props.zDepth,
-      });
+      nextState.zDepth = nextProps.disabled ? 0 : this.props.zDepth;
+    }
+    if (nextProps.disabled) {
+      nextState.hovered = false;
     }
+
+    this.setState(nextState);
   }
 
   handleMouseDown = (event) => {

src/FloatingActionButton/FloatingActionButton.spec.js

@@ -0,0 +1,30 @@
+/* eslint-env mocha */
+import React from 'react';
+import {shallow} from 'enzyme';
+import {assert} from 'chai';
+
+import FloatingActionButton from './FloatingActionButton';
+import getMuiTheme from '../styles/getMuiTheme';
+import ContentAdd from '../svg-icons/content/add';
+
+describe('<FloatingActionButton />', () => {
+  const muiTheme = getMuiTheme();
+  const shallowWithContext = (node) => shallow(node, {context: {muiTheme}});
+
+  describe('hover state', () => {
+    it('should reset the hover state when disabled', () => {
+      const wrapper = shallowWithContext(
+        <FloatingActionButton>
+          <ContentAdd />
+        </FloatingActionButton>
+      );
+      wrapper.setState({
+        hovered: true,
+      });
+      wrapper.setProps({
+        disabled: true,
+      });
+      assert.strictEqual(wrapper.state().hovered, false, 'should reset the state');
+    });
+  });
+});

src/RaisedButton/RaisedButton.js

@@ -243,7 +243,7 @@ class RaisedButton extends Component {
       initialZDepth: zDepth,
     };
 
-    if (nextProps.disabled && this.state.hovered) {
+    if (nextProps.disabled) {
       nextState.hovered = false;
     }