focus node and selected node fixes

Author: garygong

components/tree/__tests__/tree.browser-test.jsx

@@ -8,6 +8,7 @@ import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 
 import isFunction from 'lodash.isfunction';
+import cloneDeep from 'lodash.clonedeep';
 
 import chai, { expect } from 'chai';
 import chaiEnzyme from 'chai-enzyme';
@@ -60,7 +61,7 @@ const DemoTree = createReactClass({
 			? sampleNodes[this.props.exampleNodesIndex]
 			: sampleNodes.sampleNodesDefault;
 		return {
-			nodes: initalNodes,
+			nodes: cloneDeep(initalNodes),
 			searchTerm: this.props.searchable ? 'fruit' : undefined,
 		};
 	},

components/tree/index.jsx

@@ -14,6 +14,8 @@ import PropTypes from 'prop-types';
 // ### classNames
 import classNames from 'classnames';
 
+import find from 'lodash.find';
+
 // Child components
 import Branch from './private/branch';
 
@@ -29,15 +31,27 @@ import { TREE } from '../../utilities/constants';
 class Tree extends React.Component {
 	constructor (props) {
 		super(props);
+		const flattenedNodes = this.flattenTree({
+			nodes: this.props.nodes,
+			expanded: true,
+		}).slice(1);
+		const selectedNode = find(
+			flattenedNodes,
+			(curNode) => curNode.node.selected
+		);
+		const selectedNodeIndexes = [];
+		let focusedNodeIndex;
+		if (selectedNode) {
+			selectedNodeIndexes.push(selectedNode.treeIndex);
+			focusedNodeIndex = selectedNode.treeIndex;
+		}
 		this.handleSelect = this.handleSelect.bind(this);
 		this.handleNodeBlur = this.handleNodeBlur.bind(this);
 		this.handleExpand = this.handleExpand.bind(this);
 		this.state = {
-			flattenedNodes: this.flattenTree({
-				nodes: this.props.nodes,
-				expanded: true,
-			}).slice(1),
-			selectedNodeIndexes: [],
+			flattenedNodes,
+			selectedNodeIndexes,
+			focusedNodeIndex,
 		};
 	}
 

components/tree/private/branch.jsx

@@ -38,7 +38,6 @@ import { TREE_BRANCH } from '../../../utilities/constants';
 
 const handleExpand = (event, props) => {
 	EventUtil.trap(event);
-
 	if (isFunction(props.onExpand)) {
 		props.onExpand(event, {
 			node: props.node,
@@ -173,7 +172,7 @@ const handleKeyDown = (event, props) => {
 };
 
 const handleFocus = (event, props) => {
-	if (!props.focusedNodeIndex) {
+	if (!props.focusedNodeIndex && event.target === event.currentTarget) {
 		handleSelect(event, props);
 	}
 };

components/tree/private/item.jsx

@@ -130,7 +130,7 @@ const handleKeyDown = (event, props) => {
 };
 
 const handleFocus = (event, props) => {
-	if (!props.focusedNodeIndex) {
+	if (!props.focusedNodeIndex && event.target === event.currentTarget) {
 		handleSelect(event, props);
 	}
 };