fix: Transfer with rowKey will be unselectable (#43115)

* test: test driven * fix: keys mapping * chore: add bug version
ant-design · Jun 20, 2023 · 5d65881 · 5d65881
1 parent 8d15644
commit 5d65881
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/components/transfer/__tests__/index.test.tsx b/components/transfer/__tests__/index.test.tsx
@@ -496,10 +496,32 @@ describe('Transfer', () => {
     expect(onScroll).toHaveBeenLastCalledWith('right', expect.anything());
   });
 
-  it('should support rowKey is function', () => {
-    expect(() => {
-      render(<Transfer {...listCommonProps} rowKey={(record) => record.key} />);
-    }).not.toThrow();
+  it('support rowKey', () => {
+    const onSelectChange = jest.fn();
+
+    const Demo = () => {
+      const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+
+      return (
+        <Transfer
+          {...listCommonProps}
+          selectedKeys={selectedKeys}
+          rowKey={(record) => `key_${record.key}`}
+          onSelectChange={(keys) => {
+            onSelectChange(keys);
+            setSelectedKeys(keys);
+          }}
+        />
+      );
+    };
+
+    const { container } = render(<Demo />);
+
+    fireEvent.click(container.querySelector('.ant-transfer-list-content input')!);
+    expect(onSelectChange).toHaveBeenCalledWith(['key_a']);
+    expect(
+      container.querySelector<HTMLInputElement>('.ant-transfer-list-content input')!.checked,
+    ).toBeTruthy();
   });
 
   it('should support render value and label in item', () => {

diff --git a/components/transfer/hooks/useSelection.ts b/components/transfer/hooks/useSelection.ts
@@ -7,6 +7,10 @@ function filterKeys(keys: string[], dataKeys: Set<string>) {
   return keys.length === filteredKeys.length ? keys : filteredKeys;
 }
 
+function flattenKeys(keys: Set<string>) {
+  return Array.from(keys).join(';');
+}
+
 export default function useSelection<T extends { key: string }>(
   leftDataSource: T[],
   rightDataSource: T[],
@@ -44,7 +48,7 @@ export default function useSelection<T extends { key: string }>(
   React.useEffect(() => {
     setSourceSelectedKeys(filterKeys(sourceSelectedKeys, leftKeys));
     setTargetSelectedKeys(filterKeys(targetSelectedKeys, rightKeys));
-  }, [leftKeys, rightKeys]);
+  }, [flattenKeys(leftKeys), flattenKeys(rightKeys)]);
 
   return [
     // Keys

diff --git a/scripts/post-script.js b/scripts/post-script.js
@@ -37,6 +37,7 @@ const DEPRECIATED_VERSION = {
     'https://github.com/ant-design/cssinjs/pull/108',
     'https://github.com/ant-design/ant-design/pull/41993',
   ],
+  '5.6.2': ['https://github.com/ant-design/ant-design/issues/43113'],
 };
 
 function matchDeprecated(version) {