feat(ripple): Call focus/blur handlers from foundation (#135)

material-components · Jul 12, 2018 · c438333 · c438333
1 parent 9530528
commit c438333
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 0 deletions.
diff --git a/packages/ripple/index.js b/packages/ripple/index.js
@@ -77,6 +77,16 @@ const withRipple = (WrappedComponent) => {
       return classnames(Array.from(classList), wrappedCompClasses);
     }
 
+    handleFocus = (e) => {
+      this.props.onFocus(e);
+      this.foundation_.handleFocus();
+    }
+
+    handleBlur = (e) => {
+      this.props.onBlur(e);
+      this.foundation_.handleBlur();
+    }
+
     handleMouseDown = (e) => {
       this.props.onMouseDown(e);
       this.activateRipple(e);
@@ -148,6 +158,8 @@ const withRipple = (WrappedComponent) => {
         onTouchEnd,
         onKeyDown,
         onKeyUp,
+        onFocus,
+        onBlur,
         /* eslint-enable */
         /* end black list of otherprops */
         ...otherProps
@@ -160,6 +172,8 @@ const withRipple = (WrappedComponent) => {
         onTouchEnd: this.handleTouchEnd,
         onKeyDown: this.handleKeyDown,
         onKeyUp: this.handleKeyUp,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
         // call initRipple on ref on root element that needs ripple
         initRipple: this.initializeFoundation_,
         className: this.classes,
@@ -181,6 +195,8 @@ const withRipple = (WrappedComponent) => {
     onTouchEnd: PropTypes.func,
     onKeyDown: PropTypes.func,
     onKeyUp: PropTypes.func,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
   }, WrappedComponent.propTypes);
 
   WrappedComponent.defaultProps = Object.assign({
@@ -194,6 +210,8 @@ const withRipple = (WrappedComponent) => {
     onTouchEnd: () => {},
     onKeyDown: () => {},
     onKeyUp: () => {},
+    onFocus: () => {},
+    onBlur: () => {},
   }, WrappedComponent.defaultProps);
 
   RippledComponent.propTypes = WrappedComponent.propTypes;

diff --git a/test/unit/ripple/index.test.js b/test/unit/ripple/index.test.js
@@ -153,6 +153,42 @@ test('keyUp event triggers deactivateRipple with no onKeyUp handler', () => {
   td.verify(foundation.deactivate(td.matchers.isA(Object)), {times: 1});
 });
 
+test('focus event proxies to foundation focus handler', () => {
+  const focusHandler = td.func();
+  const wrapper = mount(<DivRipple onFocus={focusHandler}/>);
+  const foundation = wrapper.instance().foundation_;
+  foundation.handleFocus = td.func();
+  wrapper.simulate('focus');
+  td.verify(foundation.handleFocus(), {times: 1});
+  td.verify(focusHandler(td.matchers.isA(Object)), {times: 1});
+});
+
+test('focus event proxies to foundation focus handler with no onFocus handler', () => {
+  const wrapper = mount(<DivRipple />);
+  const foundation = wrapper.instance().foundation_;
+  foundation.handleFocus = td.func();
+  wrapper.simulate('focus');
+  td.verify(foundation.handleFocus(), {times: 1});
+});
+
+test('blur event proxies to foundation blur handler', () => {
+  const blurHandler = td.func();
+  const wrapper = mount(<DivRipple onBlur={blurHandler}/>);
+  const foundation = wrapper.instance().foundation_;
+  foundation.handleBlur = td.func();
+  wrapper.simulate('blur');
+  td.verify(foundation.handleBlur(), {times: 1});
+  td.verify(blurHandler(td.matchers.isA(Object)), {times: 1});
+});
+
+test('blur event proxies to foundation blur handler with no onBlur handler', () => {
+  const wrapper = mount(<DivRipple />);
+  const foundation = wrapper.instance().foundation_;
+  foundation.handleBlur = td.func();
+  wrapper.simulate('blur');
+  td.verify(foundation.handleBlur(), {times: 1});
+});
+
 test('#adapter.isUnbounded returns true is prop is set', () => {
   const wrapper = mount(<DivRipple unbounded />);
   assert.isTrue(wrapper.instance().foundation_.adapter_.isUnbounded());