fix: transfer error when reset data in some cases

ant-design · Jun 1, 2023 · fe08ed8 · fe08ed8
1 parent b9db39d
commit fe08ed8
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 1 deletion.
diff --git a/components/transfer/__tests__/index.test.tsx b/components/transfer/__tests__/index.test.tsx
@@ -1,9 +1,11 @@
 import { fireEvent, render, waitFor } from '@testing-library/react';
-import React, { useState } from 'react';
+import { DefaultRecordType } from 'rc-table/lib/interface';
+import React, { useEffect, useState } from 'react';
 import type { SelectAllLabel, TransferProps } from '..';
 import Transfer from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
+import Button from '../../button';
 
 const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
@@ -621,4 +623,72 @@ describe('immutable data', () => {
     const { container } = render(<Transfer rowKey={(item) => item.id} dataSource={mockData} />);
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it('prevent error when reset data in some cases', () => {
+    const App = () => {
+      const [mockData, setMockData] = useState<DefaultRecordType[]>([]);
+      const [targetKeys, setTargetKeys] = useState<string[]>([]);
+
+      const getMock = () => {
+        const tempTargetKeys = [];
+        const tempMockData = [];
+        for (let i = 0; i < 2; i++) {
+          const data = {
+            key: i.toString(),
+            title: `content${i + 1}`,
+            description: `description of content${i + 1}`,
+            chosen: i % 2 === 0,
+          };
+          if (data.chosen) {
+            tempTargetKeys.push(data.key);
+          }
+          tempMockData.push(data);
+        }
+        setMockData(tempMockData);
+        setTargetKeys(tempTargetKeys);
+      };
+
+      useEffect(() => {
+        getMock();
+      }, []);
+
+      const handleChange = (newTargetKeys: string[]) => {
+        setTargetKeys(newTargetKeys);
+      };
+
+      return (
+        <>
+          <Transfer
+            dataSource={mockData}
+            operations={['to right', 'to left']}
+            targetKeys={targetKeys}
+            onChange={handleChange}
+            render={(item) => `test-${item}`}
+            footer={() => <Button onClick={getMock}>Right button reload</Button>}
+          />
+        </>
+      );
+    };
+
+    const { container } = render(<App />);
+    fireEvent.click(container.querySelector('.ant-transfer-list-header input[type="checkbox"]')!);
+    fireEvent.click(container.querySelector('.ant-transfer-operation .ant-btn')!);
+    expect(container.querySelectorAll('.ant-transfer-list')[1]).toBeTruthy();
+    expect(
+      container
+        .querySelectorAll('.ant-transfer-list')[1]
+        .querySelectorAll('.ant-transfer-list-content-item').length,
+    ).toBe(2);
+
+    fireEvent.click(
+      container.querySelectorAll('.ant-transfer-list-header input[type="checkbox"]')![1],
+    );
+    expect(container.querySelectorAll('.ant-transfer-list-header-selected')[1]).toContainHTML(
+      '2/2',
+    );
+    fireEvent.click(container.querySelector('.ant-transfer-list-footer .ant-btn')!);
+    expect(container.querySelectorAll('.ant-transfer-list-header-selected')[1]).toContainHTML(
+      '1/1',
+    );
+  });
 });
diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx
@@ -159,6 +159,19 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
     if (props.selectedKeys) {
       setSourceSelectedKeys(() => selectedKeys.filter((key) => !targetKeys.includes(key)));
       setTargetSelectedKeys(() => selectedKeys.filter((key) => targetKeys.includes(key)));
+      return;
+    }
+
+    // This is the calculation scheme when there are no props.selectedKeys
+    if (props.selectedKeys) {
+      setSourceSelectedKeys(() =>
+        props.targetKeys!.filter((key) => !sourceSelectedKeys.includes(key)),
+      );
+    }
+    if (props.targetKeys) {
+      setTargetSelectedKeys(() =>
+        props.targetKeys!.filter((key) => targetSelectedKeys.includes(key)),
+      );
     }
   }, [props.selectedKeys, props.targetKeys]);