From bef2d80c75f533fba3ccc47a1d055b6f6ad6a639 Mon Sep 17 00:00:00 2001
From: Wanpan <wanpan96@163.com>
Date: Tue, 9 Apr 2024 14:08:12 +0800
Subject: [PATCH] fix: long label panel position abnormal (#473)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: long label panel position abnormal

* fix: optimized reset activeValueCells logic

* fix: optimized reset logic

* fix: Simplify the logic

* test: add test case

---------

Co-authored-by: 二货机器人 <smith3816@gmail.com>
---
 src/OptionList/useActive.ts |  2 +-
 tests/selector.spec.tsx     | 44 +++++++++++++++++++++++++++++++++++--
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/OptionList/useActive.ts b/src/OptionList/useActive.ts
index 7bf02724..849f9bfb 100644
--- a/src/OptionList/useActive.ts
+++ b/src/OptionList/useActive.ts
@@ -18,7 +18,7 @@ export default (
 
   React.useEffect(
     () => {
-      if (open && !multiple) {
+      if (!multiple) {
         setActiveValueCells(firstValueCells || []);
       }
     },
diff --git a/tests/selector.spec.tsx b/tests/selector.spec.tsx
index 3b20e6c9..840ca194 100644
--- a/tests/selector.spec.tsx
+++ b/tests/selector.spec.tsx
@@ -1,18 +1,58 @@
 import React, { useState } from 'react';
+import { fireEvent, render } from '@testing-library/react';
 import { mount } from './enzyme';
 import Cascader from '../src';
 import { addressOptions } from './demoOptions';
 
+// Mock `useActive` hook
+jest.mock('../src/OptionList/useActive', () => (multiple: boolean, open: boolean) => {
+  // Pass to origin hooks
+  const originHook = jest.requireActual('../src/OptionList/useActive').default;
+  const [activeValueCells, setActiveValueCells] = originHook(multiple, open);
+
+  global.activeValueCells = activeValueCells;
+
+  return [activeValueCells, setActiveValueCells];
+});
+
 describe('Cascader.Selector', () => {
   describe('clear all', () => {
     it('single', () => {
       const onChange = jest.fn();
-      const wrapper = mount(<Cascader value={['not', 'exist']} allowClear onChange={onChange} />);
+      const { container } = render(
+        <Cascader value={['not', 'exist']} allowClear onChange={onChange} />,
+      );
 
-      wrapper.find('.rc-cascader-clear-icon').simulate('mouseDown');
+      fireEvent.mouseDown(container.querySelector('.rc-cascader-clear-icon'));
       expect(onChange).toHaveBeenCalledWith(undefined, undefined);
     });
 
+    it('Should clear activeCells', () => {
+      const onChange = jest.fn();
+
+      const { container } = render(
+        <Cascader
+          allowClear
+          onChange={onChange}
+          options={[
+            { label: 'Bamboo', value: 'bamboo', children: [{ label: 'Little', value: 'little' }] },
+          ]}
+        />,
+      );
+
+      // Open and select
+      fireEvent.mouseDown(container.querySelector('.rc-cascader-selector'));
+      expect(container.querySelector('.rc-cascader-open')).toBeTruthy();
+
+      fireEvent.click(container.querySelector('.rc-cascader-menu-item-content'));
+      fireEvent.click(container.querySelectorAll('.rc-cascader-menu-item-content')[1]);
+      expect(container.querySelector('.rc-cascader-open')).toBeFalsy();
+
+      // Clear
+      fireEvent.mouseDown(container.querySelector('.rc-cascader-clear-icon'));
+      expect(global.activeValueCells).toEqual([]);
+    });
+
     it('multiple', () => {
       const onChange = jest.fn();
       const wrapper = mount(