fix(ripple): focus style alive when disabled (#943)

material-components · Jun 21, 2019 · e222e94 · e222e94
1 parent b2f7855
commit e222e94
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/ripple/index.tsx b/packages/ripple/index.tsx
@@ -146,6 +146,12 @@ export function withRipple<
       }
     }
 
+    componentDidUpdate(prevProps: P) {
+      if (this.props.disabled !== prevProps.disabled && this.props.disabled) {
+        this.foundation.handleBlur();
+      }
+    }
+
     componentWillUnmount() {
       if (this.foundation) {
         this.isComponentMounted = false;

diff --git a/test/unit/ripple/index.test.tsx b/test/unit/ripple/index.test.tsx
@@ -5,7 +5,9 @@ import {MDCRippleFoundation} from '@material/ripple/foundation';
 import {MDCRippleAdapter} from '@material/ripple/adapter';
 import {SpecificEventListener} from '@material/base/types';
 import {mount} from 'enzyme';
-import {withRipple, InjectedProps} from '../../../packages/ripple/index';
+
+import Button from '../../../packages/button';
+import {withRipple, InjectedProps} from '../../../packages/ripple';
 import {createMockRaf} from '../helpers/raf';
 import {coerceForTesting} from '../helpers/types';
 
@@ -496,3 +498,12 @@ test('unmounting component does not throw errors', (done) => {
     done();
   });
 });
+
+test('handleBlur is called when disabled is being true', () => {
+  const wrapper = mount(<Button />);
+  const foundation = coerceForTesting<RippledComponent>(wrapper.instance())
+    .foundation;
+  foundation.handleBlur = td.func<() => void>();
+  wrapper.setProps({disabled: true});
+  td.verify(foundation.handleBlur(), {times: 1});
+});