fix(dropdown): fix lost values on virtual list (#376)

Author: mortalYoung

src/dropdown/__tests__/dropdown.test.tsx

@@ -351,4 +351,34 @@ describe('Test Dropdown.Select Component', () => {
             'ant-checkbox-checked'
         );
     });
+
+    it('Should get correct checked values on virtual list', () => {
+        const fn = jest.fn();
+        const { getByTestId, getByText } = render(
+            <Dropdown.Select
+                value={[2, 1000, 2000]}
+                options={Array.from({ length: 10000 }).map((_, index) => ({
+                    label: index,
+                    value: index,
+                }))}
+                onChange={fn}
+                getPopupContainer={(node) => node}
+            >
+                <Button type="link" data-testid="trigger">
+                    打开下拉
+                </Button>
+            </Dropdown.Select>
+        );
+
+        fireEvent.click(getByTestId('trigger'));
+        act(() => {
+            jest.runAllTimers();
+        });
+
+        fireEvent.click(getByText('1'));
+        expect(fn).toBeCalledWith([1000, 2, 2000, 1]);
+
+        fireEvent.click(getByText('2'));
+        expect(fn).toBeCalledWith([1000, 2000]);
+    });
 });

src/dropdown/demos/virtual.tsx

@@ -3,13 +3,16 @@ import { Button } from 'antd';
 import { Dropdown } from 'dt-react-component';
 
 export default () => {
-    const [selected, setSelected] = useState<number[]>([2]);
+    const [selected, setSelected] = useState<number[]>([2, 1000, 2000]);
 
     return (
         <Dropdown.Select
             value={selected}
             options={new Array(10000).fill('').map((_, idx) => idx)}
-            onChange={(val) => setSelected(val as number[])}
+            onChange={(val) => {
+                console.log(val);
+                setSelected(val as number[]);
+            }}
             onSubmit={() => {
                 console.log('submit');
             }}

src/dropdown/select.tsx

@@ -49,6 +49,13 @@ export default function Select({
         onChange?.(options?.filter((i) => i.disabled).map((i) => i.value) || []);
     };
 
+    const handleChange = (e: CheckboxChangeEvent) => {
+        const next = e.target.checked
+            ? [...(value || []), e.target.value]
+            : value?.filter((i) => i !== e.target.value);
+        onChange?.(next);
+    };
+
     const handleShadow = (target: HTMLDivElement) => {
         if (target) {
             if (!target.querySelector(`.${prefix}__shadow`)) {
@@ -116,7 +123,7 @@ export default function Select({
                     </Checkbox>
                 </Col>
                 <Col span={24} className={`${prefix}__menu`}>
-                    <Checkbox.Group onChange={onChange} value={value}>
+                    <Checkbox.Group value={value}>
                         <List
                             data={options}
                             itemKey="value"
@@ -136,7 +143,11 @@ export default function Select({
                                     key={option.value.toString()}
                                     className={`${prefix}__col`}
                                 >
-                                    <Checkbox disabled={option.disabled} value={option.value}>
+                                    <Checkbox
+                                        disabled={option.disabled}
+                                        value={option.value}
+                                        onChange={handleChange}
+                                    >
                                         {option.label}
                                     </Checkbox>
                                 </Col>