fix:优化tree节点onFocus事件；解决点击子节点触发外层Ul上的onFocus问题

build/Tree.css

@@ -222,6 +222,10 @@
     list-style: none;
     white-space: nowrap;
     outline: 0; }
+    .u-tree li:first-child {
+      padding-top: 8px; }
+    .u-tree li:last-child {
+      padding-bottom: 0; }
   .u-tree li a[draggable],
   .u-tree li a[draggable="true"] {
     -webkit-user-select: none;
@@ -247,19 +251,21 @@
     padding: 0 0 0 18px; }
   .u-tree li a {
     display: inline-block;
-    padding: 1px 5px;
+    padding: 0px 5px;
     border-radius: 2px;
     margin: 0;
     cursor: pointer;
     text-decoration: none;
-    vertical-align: top;
+    vertical-align: middle;
     color: #666;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease; }
+    .u-tree li a.u-tree-node-content-wrapper {
+      width: calc(100% - 18px); }
   .u-tree li a:hover {
-    background-color: rgb(227,242,253); }
+    background-color: rgb(243,243,243); }
   .u-tree li a.u-tree-node-selected {
-    background-color: rgb(227,242,253); }
+    background-color: rgb(243,243,243); }
     .u-tree li a.u-tree-node-selected .u-tree-title {
       color: rgb(30,136,229); }
   .u-tree li span.u-checkbox {

build/Tree.js

@@ -45,12 +45,12 @@ var Tree = function (_React$Component) {
 
     var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
 
-    ['onKeyDown', 'onCheck'].forEach(function (m) {
+    ['onKeyDown', 'onCheck', "onUlFocus"].forEach(function (m) {
       _this[m] = _this[m].bind(_this);
     });
     _this.contextmenuKeys = [];
     _this.checkedKeysChange = true;
-
+    _this.selectKeyDomPos = '0-0';
     _this.state = {
       expandedKeys: _this.getDefaultExpandedKeys(props),
       checkedKeys: _this.getDefaultCheckedKeys(props),
@@ -393,6 +393,7 @@ var Tree = function (_React$Component) {
   };
 
   Tree.prototype.onMouseLeave = function onMouseLeave(e, treeNode) {
+    console.log('***leave**');
     this.props.onMouseLeave({
       event: e,
       node: treeNode
@@ -539,7 +540,8 @@ var Tree = function (_React$Component) {
 
 
   Tree.prototype.onKeyDown = function onKeyDown(e, treeNode) {
-
+    console.log('keydownNode----', e.keyCode);
+    e.stopPropagation();
     var props = this.props;
     var currentPos = treeNode.props.pos;
     var currentIndex = currentPos.substr(currentPos.lastIndexOf('-') + 1);
@@ -563,6 +565,53 @@ var Tree = function (_React$Component) {
     // e.preventDefault();
   };
 
+  Tree.prototype.onUlFocus = function onUlFocus(e) {
+    var _this4 = this;
+
+    var targetDom = e.target;
+    console.log('target******************', e.target, e.currentTarget);
+    if (this.refs.tree == e.target) {
+      var onFocus = this.props.onFocus;
+      var _state$selectedKeys = this.state.selectedKeys,
+          selectedKeys = _state$selectedKeys === undefined ? [] : _state$selectedKeys;
+
+      var tabIndexKey = selectedKeys[0];
+      var isExist = false;
+      if (this.selectKeyDomExist && tabIndexKey || !tabIndexKey) {
+        isExist = true;
+        var queryInfo = 'a[pos="' + this.selectKeyDomPos + '"]';
+        var parentEle = (0, _util.closest)(e.target, ".u-tree");
+        var focusEle = parentEle ? parentEle.querySelector(queryInfo) : null;
+        focusEle && focusEle.focus();
+      }
+      var onFocusRes = onFocus && onFocus(isExist);
+      // onFocus && onFocus(isExist,(isExist)=>{
+      //     if(!isExist){
+      //       const queryInfo = `a[pos="${this.selectKeyDomPos}"]`;
+      //       const parentEle = closest(targetDom,".u-tree")
+      //       const focusEle = parentEle?parentEle.querySelector(queryInfo):null;
+      //       focusEle && focusEle.focus();
+      //     }
+      // })
+
+      if (onFocusRes instanceof Promise) {
+        onFocusRes.then(function () {
+          if (!isExist) {
+            var _queryInfo = 'a[pos="' + _this4.selectKeyDomPos + '"]';
+            var _parentEle = (0, _util.closest)(targetDom, ".u-tree");
+            var _focusEle = _parentEle ? _parentEle.querySelector(_queryInfo) : null;
+            _focusEle && _focusEle.focus();
+          }
+        });
+      } else {
+        var _queryInfo2 = 'a[pos="' + this.selectKeyDomPos + '"]';
+        var _parentEle2 = (0, _util.closest)(targetDom, ".u-tree");
+        var _focusEle2 = _parentEle2 ? _parentEle2.querySelector(_queryInfo2) : null;
+        _focusEle2 && _focusEle2.focus();
+      }
+    }
+  };
+
   Tree.prototype.getFilterExpandedKeys = function getFilterExpandedKeys(props, expandKeyProp, expandAll) {
     var keys = props[expandKeyProp];
     if (!expandAll && !props.autoExpandParent) {
@@ -687,9 +736,18 @@ var Tree = function (_React$Component) {
 
     var pos = level + '-' + index;
     var key = child.key || pos;
+
     var state = this.state;
     var props = this.props;
+    var _state$selectedKeys2 = this.state.selectedKeys,
+        selectedKeys = _state$selectedKeys2 === undefined ? [] : _state$selectedKeys2;
 
+    var tabIndexKey = selectedKeys[0];
+    if (tabIndexKey && key == tabIndexKey) {
+      console.log('tabIndexKey', props.tabIndexKey);
+      this.selectKeyDomExist = true;
+      this.selectKeyDomPos = pos;
+    }
     // prefer to child's own selectable property if passed
     var selectable = props.selectable;
     if (child.props.hasOwnProperty('selectable')) {
@@ -756,7 +814,7 @@ var Tree = function (_React$Component) {
   };
 
   Tree.prototype.render = function render() {
-    var _this4 = this;
+    var _this5 = this;
 
     var props = this.props;
     var showLineCls = "";
@@ -773,9 +831,9 @@ var Tree = function (_React$Component) {
     //   // domProps.onKeyDown = this.onKeyDown;//添加到具体的treeNode上了
     // }
     var getTreeNodesStates = function getTreeNodesStates() {
-      _this4.treeNodesStates = {};
+      _this5.treeNodesStates = {};
       (0, _util.loopAllChildren)(props.children, function (item, index, pos, keyOrPos, siblingPosition) {
-        _this4.treeNodesStates[pos] = {
+        _this5.treeNodesStates[pos] = {
           siblingPosition: siblingPosition
         };
       });
@@ -800,7 +858,7 @@ var Tree = function (_React$Component) {
           var checkedPositions = [];
           this.treeNodesStates = {};
           (0, _util.loopAllChildren)(props.children, function (item, index, pos, keyOrPos, siblingPosition) {
-            _this4.treeNodesStates[pos] = {
+            _this5.treeNodesStates[pos] = {
               node: item,
               key: keyOrPos,
               checked: false,
@@ -808,7 +866,7 @@ var Tree = function (_React$Component) {
               siblingPosition: siblingPosition
             };
             if (checkedKeys.indexOf(keyOrPos) !== -1) {
-              _this4.treeNodesStates[pos].checked = true;
+              _this5.treeNodesStates[pos].checked = true;
               checkedPositions.push(pos);
             }
           });
@@ -820,10 +878,10 @@ var Tree = function (_React$Component) {
         this.checkedKeys = checkKeys.checkedKeys;
       }
     }
-
+    this.selectKeyDomExist = false;
     return _react2["default"].createElement(
       'ul',
-      _extends({}, domProps, { unselectable: 'true', ref: 'tree' }),
+      _extends({}, domProps, { unselectable: 'true', ref: 'tree', onFocus: this.onUlFocus, tabIndex: props.focusable && props.tabIndexValue }),
       _react2["default"].Children.map(props.children, this.renderTreeNode, this)
     );
   };
@@ -892,7 +950,8 @@ Tree.defaultProps = {
   onDragLeave: noop,
   onDrop: noop,
   onDragEnd: noop,
-  onDoubleClick: noop
+  onDoubleClick: noop,
+  tabIndexValue: 0
 };
 
 exports["default"] = Tree;

build/TreeNode.js

@@ -366,6 +366,10 @@ var TreeNode = function (_React$Component) {
     return isLeaf || !loadData && !hasChildren;
   };
 
+  TreeNode.prototype.onFocus = function onFocus(e) {
+    e.stopPropagation();
+  };
+
   TreeNode.prototype.render = function render() {
     var _iconEleCls,
         _this4 = this;
@@ -500,7 +504,7 @@ var TreeNode = function (_React$Component) {
       liProps.onDrop = this.onDrop;
       liProps.onDragEnd = this.onDragEnd;
     }
-
+    liProps.onFocus = this.onFocus;
     var disabledCls = '';
     var dragOverCls = '';
     if (props.disabled) {
@@ -528,11 +532,11 @@ var TreeNode = function (_React$Component) {
       }
       return _react2["default"].createElement('span', { className: (0, _classnames2["default"])(cls) });
     };
-
+    var selectedCls = props.selected ? prefixCls + '-treenode-selected' : '';
     return _react2["default"].createElement(
       'li',
       _extends({}, liProps, { ref: 'li', style: props.style,
-        className: (0, _classnames2["default"])(props.className, disabledCls, dragOverCls, filterCls)
+        className: (0, _classnames2["default"])(props.className, disabledCls, dragOverCls, filterCls, selectedCls)
       }),
       canRenderSwitcher ? this.renderSwitcher(props, expandedState) : noopSwitcher(),
       props.checkable ? this.renderCheckbox(props) : null,

src/Tree.js

@@ -21,12 +21,12 @@ function noop() {}
 class Tree extends React.Component {
   constructor(props) {
     super(props);
-    ['onKeyDown', 'onCheck'].forEach((m) => {
+    ['onKeyDown', 'onCheck',"onUlFocus","_focusDom"].forEach((m) => {
       this[m] = this[m].bind(this);
     });
     this.contextmenuKeys = [];
     this.checkedKeysChange = true;
-
+    this.selectKeyDomPos = '0-0';
     this.state = {
       expandedKeys: this.getDefaultExpandedKeys(props),
       checkedKeys: this.getDefaultCheckedKeys(props),
@@ -355,7 +355,7 @@ onExpand(treeNode,keyType) {
     props.onDoubleClick(eventKey,newSt);
   }
 
-  onMouseEnter(e, treeNode) {
+  on1Enter(e, treeNode) {
     this.props.onMouseEnter({
       event: e,
       node: treeNode
@@ -369,6 +369,8 @@ onExpand(treeNode,keyType) {
     });
   }
 
+
+
   onContextMenu(e, treeNode) {
     const selectedKeys = [...this.state.selectedKeys];
     const eventKey = treeNode.props.eventKey;
@@ -510,7 +512,7 @@ onExpand(treeNode,keyType) {
   }
   // all keyboard events callbacks run from here at first
   onKeyDown(e,treeNode) {
-   
+    e.stopPropagation();
     const props = this.props;
     const currentPos = treeNode.props.pos;
     const currentIndex = currentPos.substr(currentPos.lastIndexOf('-')+1);
@@ -532,8 +534,49 @@ onExpand(treeNode,keyType) {
       this.onDoubleClick(treeNode);
     }
     // e.preventDefault();
+   
   }
 
+  _focusDom(selectKeyDomPos,targetDom){
+    const queryInfo = `a[pos="${selectKeyDomPos}"]`;
+    const parentEle = closest(targetDom,".u-tree")
+    const focusEle = parentEle?parentEle.querySelector(queryInfo):null;
+    focusEle && focusEle.focus();
+  }
+
+  onUlFocus(e){ 
+    const targetDom = e.target;
+    if(this.refs.tree == e.target){
+      const {onFocus} = this.props;
+      const {selectedKeys=[]} = this.state;
+      let tabIndexKey = selectedKeys[0]
+      let isExist = false;
+      if((this.selectKeyDomExist && tabIndexKey) || !tabIndexKey){
+        isExist = true;
+        const queryInfo = `a[pos="${this.selectKeyDomPos}"]`;
+        const parentEle = closest(e.target,".u-tree")
+        const focusEle = parentEle?parentEle.querySelector(queryInfo):null;
+        focusEle && focusEle.focus();
+      }
+      let onFocusRes = onFocus && onFocus(isExist);
+        if(onFocusRes instanceof Promise){
+          onFocusRes.then(()=>{
+            if(!isExist){
+                this._focusDom(this.selectKeyDomPos,targetDom);
+              }
+          });
+        }else{
+          this._focusDom(this.selectKeyDomPos,targetDom);
+        } 
+      }
+
+    
+    
+    
+  }
+  onUlMouseDown(e){
+    e.preventDefault();
+  }
   
   getFilterExpandedKeys(props, expandKeyProp, expandAll) {
     const keys = props[expandKeyProp];
@@ -661,9 +704,15 @@ onExpand(treeNode,keyType) {
   renderTreeNode(child, index, level = 0) {
     const pos = `${level}-${index}`;
     const key = child.key || pos;
+    
     const state = this.state;
     const props = this.props;
-
+    const {selectedKeys=[]} = this.state;
+    let tabIndexKey = selectedKeys[0]
+    if(tabIndexKey && key == tabIndexKey){
+       this.selectKeyDomExist = true;
+       this.selectKeyDomPos = pos;
+    }
     // prefer to child's own selectable property if passed
     let selectable = props.selectable;
     if (child.props.hasOwnProperty('selectable')) {
@@ -793,9 +842,9 @@ onExpand(treeNode,keyType) {
         this.checkedKeys = checkKeys.checkedKeys;
       }
     }
-
+    this.selectKeyDomExist = false;
     return (
-      <ul {...domProps} unselectable="true" ref="tree">
+      <ul {...domProps} unselectable="true" ref="tree" onFocus = {this.onUlFocus} tabIndex={props.focusable && props.tabIndexValue}  onMouseDown={this.onUlMouseDown}>
         {React.Children.map(props.children, this.renderTreeNode, this)}
       </ul>
     );
@@ -869,7 +918,8 @@ Tree.defaultProps = {
   onDragLeave: noop,
   onDrop: noop,
   onDragEnd: noop,
-  onDoubleClick:noop
+  onDoubleClick:noop,
+  tabIndexValue:0
 };
 
 export default Tree;

src/TreeNode.js

@@ -323,6 +323,9 @@ class TreeNode extends React.Component {
       isLeaf || (!loadData && !hasChildren) 
     );
   }
+  onFocus(e){
+    e.stopPropagation();
+  }
   render() {
     const props = this.props;
     const prefixCls = props.prefixCls;
@@ -460,7 +463,7 @@ class TreeNode extends React.Component {
       liProps.onDrop = this.onDrop;
       liProps.onDragEnd = this.onDragEnd;
     }
-
+    liProps.onFocus = this.onFocus;
     let disabledCls = '';
     let dragOverCls = '';
     if (props.disabled) {