fix: Tabs popup can not trigger click at first time (#245)

* fix: Tabs popup can not trigger click at first time * update snapshot * fix test
react-component · Jun 28, 2020 · 4780640 · 4780640 · vercel · Jun 28, 2020
1 parent af39039
commit 4780640
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -66,8 +66,8 @@
  "dependencies": {
  "@babel/runtime": "^7.10.1",
  "classnames": "2.x",
- "rc-select": "^11.0.0",
- "rc-tree": "^3.1.0",
+ "rc-select": "^11.0.4",
+ "rc-tree": "^3.6.0",
  "rc-util": "^5.0.1"
  }
 }
diff --git a/src/OptionList.tsx b/src/OptionList.tsx
@@ -48,6 +48,8 @@ export interface OptionListProps<OptionsType extends object[]> {
  /** Tell Select that some value is now active to make accessibility work */
  onActiveValue: (value: RawValueType, index: number) => void;
  onScroll: React.UIEventHandler<HTMLDivElement>;
+
+ onMouseEnter: () => void;
 }
 
 const OptionList: React.RefForwardingComponent<RefOptionListProps, OptionListProps<DataNode[]>> = (
@@ -67,6 +69,7 @@ const OptionList: React.RefForwardingComponent<RefOptionListProps, OptionListPro
  onToggleOpen,
  open,
  notFoundContent,
+ onMouseEnter,
  } = props;
  const {
  checkable,
@@ -236,7 +239,7 @@ const OptionList: React.RefForwardingComponent<RefOptionListProps, OptionListPro
  }
 
  return (
- <div onMouseDown={onListMouseDown}>
+ <div onMouseDown={onListMouseDown} onMouseEnter={onMouseEnter}>
  {activeEntity && open && (
  <span style={HIDDEN_STYLE} aria-live="assertive">
  {activeEntity.data.value}

diff --git a/tests/Select.props.spec.js b/tests/Select.props.spec.js
@@ -158,11 +158,12 @@ describe('TreeSelect.props', () => {
  it('set illegal value', () => {
  const wrapper = mount(
  createSelect({
+ placeholder: 'showMe',
  labelInValue: true,
  value: [null],
  }),
  );
- expect(wrapper.getSelection(0).text()).toBe('');
+ expect(wrapper.find('.rc-tree-select-selection-placeholder').text()).toBe('showMe');
  });
  });
 

diff --git a/tests/__snapshots__/Select.checkable.spec.js.snap b/tests/__snapshots__/Select.checkable.spec.js.snap
@@ -125,7 +125,7 @@ exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 1
  style="display: flex; flex-direction: column;"
  >
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-checkbox-checked"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-checkbox-checked rc-tree-select-tree-treenode-leaf-last"
  >
  <span
  class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
@@ -148,7 +148,7 @@ exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 1
  </span>
  </div>
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-checkbox-checked"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-checkbox-checked rc-tree-select-tree-treenode-leaf-last"
  >
  <span
  aria-hidden="true"
@@ -179,7 +179,7 @@ exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 1
  </span>
  </div>
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-checkbox-checked"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-checkbox-checked rc-tree-select-tree-treenode-leaf-last"
  >
  <span
  aria-hidden="true"
@@ -289,7 +289,7 @@ exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 2
  style="display: flex; flex-direction: column;"
  >
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
  >
  <span
  class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
@@ -312,7 +312,7 @@ exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 2
  </span>
  </div>
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
  >
  <span
  aria-hidden="true"
@@ -343,7 +343,7 @@ exports[`TreeSelect.checkable uncheck remove by selector not treeCheckStrictly 2
  </span>
  </div>
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
  >
  <span
  aria-hidden="true"
@@ -513,7 +513,7 @@ exports[`TreeSelect.checkable uncheck remove by tree check 1`] = `
  style="display: flex; flex-direction: column;"
  >
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-checkbox-checked filter-node"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-checkbox-checked rc-tree-select-tree-treenode-leaf-last filter-node"
  >
  <span
  class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
@@ -536,7 +536,7 @@ exports[`TreeSelect.checkable uncheck remove by tree check 1`] = `
  </span>
  </div>
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-checkbox-checked filter-node"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-checkbox-checked rc-tree-select-tree-treenode-leaf-last filter-node"
  >
  <span
  aria-hidden="true"
@@ -567,7 +567,7 @@ exports[`TreeSelect.checkable uncheck remove by tree check 1`] = `
  </span>
  </div>
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-checkbox-checked filter-node"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-checkbox-checked rc-tree-select-tree-treenode-leaf-last filter-node"
  >
  <span
  aria-hidden="true"
@@ -674,7 +674,7 @@ exports[`TreeSelect.checkable uncheck remove by tree check 2`] = `
  style="display: flex; flex-direction: column;"
  >
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open filter-node"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last filter-node"
  >
  <span
  class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
@@ -697,7 +697,7 @@ exports[`TreeSelect.checkable uncheck remove by tree check 2`] = `
  </span>
  </div>
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open filter-node"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last filter-node"
  >
  <span
  aria-hidden="true"
@@ -728,7 +728,7 @@ exports[`TreeSelect.checkable uncheck remove by tree check 2`] = `
  </span>
  </div>
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open filter-node"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last filter-node"
  >
  <span
  aria-hidden="true"

diff --git a/tests/__snapshots__/Select.spec.js.snap b/tests/__snapshots__/Select.spec.js.snap
@@ -80,7 +80,7 @@ exports[`TreeSelect.basic render renders TreeNode correctly 1`] = `
  </span>
  </div>
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
  >
  <span
  class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
@@ -128,7 +128,7 @@ exports[`TreeSelect.basic render renders TreeNode correctly 1`] = `
  </span>
  </div>
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
  >
  <span
  aria-hidden="true"
@@ -256,7 +256,7 @@ exports[`TreeSelect.basic render renders TreeNode correctly with falsy child 1`]
  </span>
  </div>
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
  >
  <span
  class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
@@ -304,7 +304,7 @@ exports[`TreeSelect.basic render renders TreeNode correctly with falsy child 1`]
  </span>
  </div>
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
  >
  <span
  aria-hidden="true"
@@ -539,7 +539,7 @@ exports[`TreeSelect.basic render renders treeDataSimpleMode correctly 1`] = `
  style="display: flex; flex-direction: column;"
  >
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
  >
  <span
  class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher_open"
@@ -559,7 +559,7 @@ exports[`TreeSelect.basic render renders treeDataSimpleMode correctly 1`] = `
  </span>
  </div>
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
  >
  <span
  aria-hidden="true"
@@ -663,7 +663,7 @@ exports[`TreeSelect.basic search nodes check tree changed by filter 1`] = `
  style="display: flex; flex-direction: column;"
  >
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open filter-node"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last filter-node"
  >
  <span
  class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
@@ -782,7 +782,7 @@ exports[`TreeSelect.basic search nodes check tree changed by filter 2`] = `
  </span>
  </div>
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last"
  >
  <span
  class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
@@ -898,7 +898,7 @@ exports[`TreeSelect.basic search nodes filter node but not remove then 1`] = `
  </span>
  </div>
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-open rc-tree-select-tree-treenode-leaf-last"
  >
  <span
  class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"
@@ -1016,7 +1016,7 @@ exports[`TreeSelect.basic search nodes renders search input 1`] = `
  </span>
  </div>
  <div
- class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close"
+ class="rc-tree-select-tree-treenode rc-tree-select-tree-treenode-switcher-close rc-tree-select-tree-treenode-leaf-last"
  >
  <span
  class="rc-tree-select-tree-switcher rc-tree-select-tree-switcher-noop"