Merge branch 'master' into feat-maxCount

Author: aojunhao123

.gitignore

@@ -25,6 +25,7 @@ dist
 build
 lib
 coverage
+.vscode
 yarn.lock
 package-lock.json
 es

README.md

@@ -34,8 +34,8 @@ export default () => {
     },
   ];
 
-  const onChange = (value: string[]) => {
-    setValue(value);
+  const onChange = (val: string[]) => {
+    setValue(val);
   };
 
   return (

examples/mutiple-with-maxCount.tsx

@@ -95,17 +95,6 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     [memoTreeData, isOverMaxCount, checkedKeys],
   );
 
-  // ========================== Active ==========================
-  const [activeKey, setActiveKey] = React.useState<Key>(null);
-  const activeEntity = keyEntities[activeKey as SafeKey];
-
-  const onActiveChange = (key: Key) => {
-    if (isOverMaxCount && !checkedKeys.includes(key)) {
-      return;
-    }
-    setActiveKey(key);
-  };
-
   // ========================== Values ==========================
   const mergedCheckedKeys = React.useMemo(() => {
     if (!checkable) {
@@ -123,18 +112,31 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     // Single mode should scroll to current key
     if (open && !multiple && checkedKeys.length) {
       treeRef.current?.scrollTo({ key: checkedKeys[0] });
-      setActiveKey(checkedKeys[0]);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 
-  // ========================== Search ==========================
-  const lowerSearchValue = String(searchValue).toLowerCase();
-  const filterTreeNode = (treeNode: EventDataNode<any>) => {
-    if (!lowerSearchValue) {
-      return false;
+  // ========================== Events ==========================
+  const onListMouseDown: React.MouseEventHandler<HTMLDivElement> = event => {
+    event.preventDefault();
+  };
+
+  const onInternalSelect = (__: Key[], info: TreeEventInfo) => {
+    const { node } = info;
+
+    if (checkable && isCheckDisabled(node)) {
+      return;
+    }
+
+    const isSelected = !checkedKeys.includes(node.key);
+
+    onSelect(node.key, {
+      selected: isSelected,
+    });
+
+    if (!multiple) {
+      toggleOpen(false);
     }
-    return String(treeNode[treeNodeFilterProp]).toLowerCase().includes(lowerSearchValue);
   };
 
   // =========================== Keys ===========================
@@ -148,13 +150,6 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     return searchValue ? searchExpandedKeys : expandedKeys;
   }, [expandedKeys, searchExpandedKeys, treeExpandedKeys, searchValue]);
 
-  React.useEffect(() => {
-    if (searchValue) {
-      setSearchExpandedKeys(getAllKeys(treeData, fieldNames));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchValue]);
-
   const onInternalExpand = (keys: Key[]) => {
     setExpandedKeys(keys);
     setSearchExpandedKeys(keys);
@@ -164,28 +159,78 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     }
   };
 
-  // ========================== Events ==========================
-  const onListMouseDown: React.MouseEventHandler<HTMLDivElement> = event => {
-    event.preventDefault();
+  // ========================== Search ==========================
+  const lowerSearchValue = String(searchValue).toLowerCase();
+  const filterTreeNode = (treeNode: EventDataNode<any>) => {
+    if (!lowerSearchValue) {
+      return false;
+    }
+    return String(treeNode[treeNodeFilterProp]).toLowerCase().includes(lowerSearchValue);
   };
 
-  const onInternalSelect = (__: Key[], info: TreeEventInfo) => {
-    const { node } = info;
+  React.useEffect(() => {
+    if (searchValue) {
+      setSearchExpandedKeys(getAllKeys(treeData, fieldNames));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchValue]);
 
-    if (checkable && isCheckDisabled(node)) {
+  // ========================== Get First Selectable Node ==========================
+  const getFirstMatchingNode = (nodes: EventDataNode<any>[]): EventDataNode<any> | null => {
+    for (const node of nodes) {
+      if (node.disabled || node.selectable === false) {
+        continue;
+      }
+
+      if (searchValue) {
+        if (filterTreeNode(node)) {
+          return node;
+        }
+      } else {
+        return node;
+      }
+
+      if (node[fieldNames.children]) {
+        const matchInChildren = getFirstMatchingNode(node[fieldNames.children]);
+        if (matchInChildren) {
+          return matchInChildren;
+        }
+      }
+    }
+    return null;
+  };
+
+  // ========================== Active ==========================
+  const [activeKey, setActiveKey] = React.useState<Key>(null);
+  const activeEntity = keyEntities[activeKey as SafeKey];
+
+  const onActiveChange = (key: Key) => {
+    if (isOverMaxCount && !checkedKeys.includes(key)) {
       return;
     }
+    setActiveKey(key);
+  };
 
-    const isSelected = !checkedKeys.includes(node.key);
+  React.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    let nextActiveKey = null;
 
-    onSelect(node.key, {
-      selected: isSelected,
-    });
+    const getFirstNode = () => {
+      const firstNode = getFirstMatchingNode(memoTreeData);
+      return firstNode ? firstNode[fieldNames.value] : null;
+    };
 
-    if (!multiple) {
-      toggleOpen(false);
+    // single mode active first checked node
+    if (!multiple && checkedKeys.length && !searchValue) {
+      nextActiveKey = checkedKeys[0];
+    } else {
+      nextActiveKey = getFirstNode();
     }
-  };
+
+    setActiveKey(nextActiveKey);
+  }, [open, searchValue]);
 
   // ========================= Keyboard =========================
   React.useImperativeHandle(ref, () => ({
@@ -204,8 +249,8 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
         // >>> Select item
         case KeyCode.ENTER: {
           if (activeEntity) {
-            const { selectable, value } = activeEntity?.node || {};
-            if (selectable !== false) {
+            const { selectable, value, disabled } = activeEntity?.node || {};
+            if (selectable !== false && !disabled) {
               onInternalSelect(null, {
                 node: { key: activeKey },
                 selected: !checkedKeys.includes(value),

src/OptionList.tsx

@@ -94,7 +94,7 @@ export interface TreeSelectProps<ValueType = any, OptionType extends DataNode =
   listItemHeight?: number;
   listItemScrollOffset?: number;
   onDropdownVisibleChange?: (open: boolean) => void;
-  treeTitleRender?: (node: ValueType) => React.ReactNode;
+  treeTitleRender?: (node: OptionType) => React.ReactNode;
 
   // >>> Tree
   treeLine?: boolean;

src/TreeSelect.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable no-undef */
 import React, { useState } from 'react';
 import { mount } from 'enzyme';
+import { render, fireEvent } from '@testing-library/react';
 import TreeSelect, { TreeNode } from '../src';
+import KeyCode from 'rc-util/lib/KeyCode';
 
 describe('TreeSelect.SearchInput', () => {
   it('select item will clean searchInput', () => {
@@ -198,4 +200,102 @@ describe('TreeSelect.SearchInput', () => {
     nodes.first().simulate('click');
     expect(called).toBe(1);
   });
+
+  describe('keyboard events', () => {
+    it('should select first matched node when press enter', () => {
+      const onSelect = jest.fn();
+      const { getByRole } = render(
+        <TreeSelect
+          showSearch
+          open
+          onSelect={onSelect}
+          treeData={[
+            { value: '1', label: '1' },
+            { value: '2', label: '2', disabled: true },
+            { value: '3', label: '3' },
+          ]}
+        />,
+      );
+
+      // Search and press enter, should select first matched non-disabled node
+      const input = getByRole('combobox');
+      fireEvent.change(input, { target: { value: '1' } });
+      fireEvent.keyDown(input, { keyCode: KeyCode.ENTER });
+      expect(onSelect).toHaveBeenCalledWith('1', expect.anything());
+      onSelect.mockReset();
+
+      // Search disabled node and press enter, should not select
+      fireEvent.change(input, { target: { value: '2' } });
+      fireEvent.keyDown(input, { keyCode: KeyCode.ENTER });
+      expect(onSelect).not.toHaveBeenCalled();
+      onSelect.mockReset();
+    });
+
+    it('should not select node when no matches found', () => {
+      const onSelect = jest.fn();
+      const { getByRole } = render(
+        <TreeSelect
+          showSearch
+          onSelect={onSelect}
+          open
+          treeData={[
+            { value: '1', label: '1' },
+            { value: '2', label: '2' },
+          ]}
+        />,
+      );
+
+      // Search non-existent value and press enter, should not select any node
+      const input = getByRole('combobox');
+      fireEvent.change(input, { target: { value: 'not-exist' } });
+      fireEvent.keyDown(input, { keyCode: KeyCode.ENTER });
+      expect(onSelect).not.toHaveBeenCalled();
+    });
+
+    it('should ignore enter press when all matched nodes are disabled', () => {
+      const onSelect = jest.fn();
+      const { getByRole } = render(
+        <TreeSelect
+          showSearch
+          onSelect={onSelect}
+          open
+          treeData={[
+            { value: '1', label: '1', disabled: true },
+            { value: '2', label: '2', disabled: true },
+          ]}
+        />,
+      );
+
+      // When all matched nodes are disabled, press enter should not select any node
+      const input = getByRole('combobox');
+      fireEvent.change(input, { target: { value: '1' } });
+      fireEvent.keyDown(input, { keyCode: KeyCode.ENTER });
+      expect(onSelect).not.toHaveBeenCalled();
+    });
+
+    it('should activate first matched node when searching', () => {
+      const { getByRole, container } = render(
+        <TreeSelect
+          showSearch
+          open
+          treeData={[
+            { value: '1', label: '1' },
+            { value: '2', label: '2', disabled: true },
+            { value: '3', label: '3' },
+          ]}
+        />,
+      );
+
+      // When searching, first matched non-disabled node should be activated
+      const input = getByRole('combobox');
+      fireEvent.change(input, { target: { value: '1' } });
+      expect(container.querySelector('.rc-tree-select-tree-treenode-active')).toHaveTextContent(
+        '1',
+      );
+
+      // Should skip disabled nodes
+      fireEvent.change(input, { target: { value: '2' } });
+      expect(container.querySelectorAll('.rc-tree-select-tree-treenode-active')).toHaveLength(0);
+    });
+  });
 });

tests/Select.SearchInput.spec.js

@@ -438,13 +438,13 @@ describe('TreeSelect.basic', () => {
       keyUp(KeyCode.DOWN);
       keyDown(KeyCode.ENTER);
       keyUp(KeyCode.ENTER);
-      matchValue(['parent']);
+      matchValue(['child']);
 
       keyDown(KeyCode.UP);
       keyUp(KeyCode.UP);
       keyDown(KeyCode.ENTER);
       keyUp(KeyCode.ENTER);
-      matchValue(['parent', 'child']);
+      matchValue(['child', 'parent']);
     });
 
     it('selectable works with keyboard operations', () => {
@@ -467,12 +467,12 @@ describe('TreeSelect.basic', () => {
 
       keyDown(KeyCode.DOWN);
       keyDown(KeyCode.ENTER);
-      expect(onChange).toHaveBeenCalledWith(['parent'], expect.anything(), expect.anything());
-      onChange.mockReset();
+      expect(onChange).not.toHaveBeenCalled();
 
       keyDown(KeyCode.UP);
       keyDown(KeyCode.ENTER);
-      expect(onChange).not.toHaveBeenCalled();
+      expect(onChange).toHaveBeenCalledWith(['parent'], expect.anything(), expect.anything());
+      onChange.mockReset();
     });
 
     it('active index matches value', () => {
@@ -535,6 +535,24 @@ describe('TreeSelect.basic', () => {
       keyDown(KeyCode.UP);
       expect(wrapper.find('.rc-tree-select-tree-treenode-active').text()).toBe('11 label');
     });
+
+    it('should active first un-disabled option when dropdown is opened', () => {
+      const treeData = [
+        { key: '0', value: '0', title: '0 label', disabled: true },
+        { key: '1', value: '1', title: '1 label' },
+        { key: '2', value: '2', title: '2 label' },
+      ];
+
+      const wrapper = mount(<TreeSelect treeData={treeData} />);
+
+      expect(wrapper.find('.rc-tree-select-tree-treenode-active')).toHaveLength(0);
+
+      wrapper.openSelect();
+
+      const activeNode = wrapper.find('.rc-tree-select-tree-treenode-active');
+      expect(activeNode).toHaveLength(1);
+      expect(activeNode.text()).toBe('1 label');
+    });
   });
 
   it('click in list should preventDefault', () => {
@@ -591,22 +609,6 @@ describe('TreeSelect.basic', () => {
     expect(container.querySelector('.rc-tree-select-selector').textContent).toBe('parent 1-0');
   });
 
-  it('should not add new tag when key enter is pressed if nothing is active', () => {
-    const onSelect = jest.fn();
-
-    const wrapper = mount(
-      <TreeSelect open treeDefaultExpandAll multiple onSelect={onSelect}>
-        <TreeNode value="parent 1-0" title="parent 1-0">
-          <TreeNode value="leaf1" title="my leaf" disabled />
-          <TreeNode value="leaf2" title="your leaf" disabled />
-        </TreeNode>
-      </TreeSelect>,
-    );
-
-    wrapper.find('input').first().simulate('keydown', { which: KeyCode.ENTER });
-    expect(onSelect).not.toHaveBeenCalled();
-  });
-
   it('should not select parent if some children is disabled', () => {
     const onChange = jest.fn();