fix(Menu): keyboard not blur

alibaba-fusion · Dec 7, 2018 · dda5a16 · dda5a16
1 parent 41c13aa
commit dda5a16
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/src/menu/view/menu.jsx b/src/menu/view/menu.jsx
@@ -145,6 +145,7 @@ export default class Menu extends Component {
         focusedKey: PropTypes.string,
         focusable: PropTypes.bool,
         onItemFocus: PropTypes.func,
+        onBlur: PropTypes.func,
         onItemKeyDown: PropTypes.func,
         expandAnimation: PropTypes.bool,
         itemClassName: PropTypes.string
@@ -195,7 +196,7 @@ export default class Menu extends Component {
             focusedKey: 'focusedKey' in this.props ? focusedKey : (focusable && autoFocus ? this.tabbableKey : null)
         };
 
-        bindCtx(this, ['handleOpen', 'handleSelect', 'handleItemClick', 'handleItemKeyDown']);
+        bindCtx(this, ['handleOpen', 'handleSelect', 'handleItemClick', 'handleItemKeyDown', 'onBlur']);
 
         this.popupNodes = [];
     }
@@ -235,6 +236,14 @@ export default class Menu extends Component {
         }
     }
 
+    onBlur(e) {
+        this.setState({
+            focusedKey: ''
+        });
+
+        this.props.onBlur && this.props.onBlur(e);
+    }
+
     getInitOpenKeys(props) {
         let initOpenKeys;
 
@@ -629,7 +638,7 @@ export default class Menu extends Component {
         }
 
         return (
-            <ul role={role} className={newClassName} onKeyDown={this.handleEnter} aria-multiselectable={selectMode === 'multiple'} {...others}>
+            <ul role={role} onBlur={this.onBlur} className={newClassName} onKeyDown={this.handleEnter} aria-multiselectable={selectMode === 'multiple'} {...others}>
                 {headerElement}
                 {shouldWrapItemsAndFooter ?
                     <div className={`${prefix}menu-hoz-right`}>