fix(ripple): Expose focus/blur handlers (#2905)

material-components · Jun 8, 2018 · 31d81ad · 31d81ad
1 parent 14cb0bf
commit 31d81ad
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/packages/mdc-ripple/README.md b/packages/mdc-ripple/README.md
@@ -150,6 +150,8 @@ Method Signature | Description
 `activate() => void` | Proxies to the foundation's `activate` method
 `deactivate() => void` | Proxies to the foundation's `deactivate` method
 `layout() => void` | Proxies to the foundation's `layout` method
+`handleFocus() => void` | Handles focus event on the ripple surface
+`handleBlur() => void` | Handles blur event on the ripple surface
 
 ### `MDCRippleAdapter`
 

diff --git a/packages/mdc-ripple/foundation.js b/packages/mdc-ripple/foundation.js
@@ -132,14 +132,10 @@ class MDCRippleFoundation extends MDCFoundation {
     this.deactivateHandler_ = (e) => this.deactivate_(e);
 
     /** @private {function(?Event=)} */
-    this.focusHandler_ = () => requestAnimationFrame(
-      () => this.adapter_.addClass(MDCRippleFoundation.cssClasses.BG_FOCUSED)
-    );
+    this.focusHandler_ = () => this.handleFocus();
 
     /** @private {function(?Event=)} */
-    this.blurHandler_ = () => requestAnimationFrame(
-      () => this.adapter_.removeClass(MDCRippleFoundation.cssClasses.BG_FOCUSED)
-    );
+    this.blurHandler_ = () => this.handleBlur();
 
     /** @private {!Function} */
     this.resizeHandler_ = () => this.layout();
@@ -587,6 +583,16 @@ class MDCRippleFoundation extends MDCFoundation {
       this.adapter_.removeClass(UNBOUNDED);
     }
   }
+
+  handleFocus() {
+    requestAnimationFrame(() =>
+      this.adapter_.addClass(MDCRippleFoundation.cssClasses.BG_FOCUSED));
+  }
+
+  handleBlur() {
+    requestAnimationFrame(() =>
+      this.adapter_.removeClass(MDCRippleFoundation.cssClasses.BG_FOCUSED));
+  }
 }
 
 export default MDCRippleFoundation;
diff --git a/test/unit/mdc-ripple/mdc-ripple.test.js b/test/unit/mdc-ripple/mdc-ripple.test.js
@@ -22,6 +22,7 @@ import td from 'testdouble';
 import {MDCRipple} from '../../../packages/mdc-ripple';
 import {cssClasses} from '../../../packages/mdc-ripple/constants';
 import * as util from '../../../packages/mdc-ripple/util';
+import {createMockRaf} from '../helpers/raf';
 
 suite('MDCRipple');
 
@@ -222,3 +223,22 @@ test('adapter#getWindowPageOffset returns page{X,Y}Offset as {x,y} respectively'
     y: window.pageYOffset,
   });
 });
+
+test(`handleFocus() adds class ${cssClasses.BG_FOCUSED}`, () => {
+  const raf = createMockRaf();
+  const {root, component} = setupTest();
+  component.foundation_.handleFocus();
+  raf.flush();
+  assert.isTrue(root.classList.contains(cssClasses.BG_FOCUSED));
+  raf.restore();
+});
+
+test(`handleBlur() removes class ${cssClasses.BG_FOCUSED}`, () => {
+  const raf = createMockRaf();
+  const {root, component} = setupTest();
+  root.classList.add(cssClasses.BG_FOCUSED);
+  component.foundation_.handleBlur();
+  raf.flush();
+  assert.isFalse(root.classList.contains(cssClasses.BG_FOCUSED));
+  raf.restore();
+});