fix(Table): preserve custom event handlers in row selection (#51661)

This commit is contained in:
zyf 2024-11-18 11:31:38 +08:00 committed by GitHub
parent fb52fbbfd0
commit 4b186714d0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 86 additions and 5 deletions

View File

@ -1905,4 +1905,76 @@ describe('Table.rowSelection', () => {
);
});
});
it('should trigger both custom and internal checkbox events', () => {
const onClickMock = jest.fn();
const onChangeMock = jest.fn();
const getCheckboxProps = () => ({
onClick: onClickMock,
onChange: onChangeMock,
});
const { container } = render(
<Table
rowSelection={{
type: 'checkbox',
getCheckboxProps,
}}
columns={columns}
dataSource={data}
/>,
);
const firstRowCheckbox = container.querySelector('tbody tr:first-child input[type="checkbox"]');
expect(firstRowCheckbox).toBeTruthy();
fireEvent.click(firstRowCheckbox!);
expect(onClickMock).toHaveBeenCalled();
expect(onClickMock.mock.calls.length).toBe(1);
expect(onChangeMock).toHaveBeenCalled();
expect(onChangeMock.mock.calls.length).toBe(1);
const changeEvent = onChangeMock.mock.calls[0][0];
expect(changeEvent).toHaveProperty('target');
expect(changeEvent.target).toHaveProperty('checked');
});
it('should trigger both custom and internal radio events', () => {
const onClickMock = jest.fn();
const onChangeMock = jest.fn();
const getCheckboxProps = () => ({
onClick: onClickMock,
onChange: onChangeMock,
});
const { container } = render(
<Table
rowSelection={{
type: 'radio',
getCheckboxProps,
}}
columns={columns}
dataSource={data}
/>,
);
const firstRowRadio = container.querySelector('tbody tr:first-child input[type="radio"]');
expect(firstRowRadio).toBeTruthy();
fireEvent.click(firstRowRadio!);
expect(onClickMock).toHaveBeenCalled();
expect(onClickMock.mock.calls.length).toBe(1);
expect(onChangeMock).toHaveBeenCalled();
expect(onChangeMock.mock.calls.length).toBe(1);
const changeEvent = onChangeMock.mock.calls[0][0];
expect(changeEvent).toHaveProperty('target');
expect(changeEvent.target).toHaveProperty('checked');
});
});

View File

@ -496,17 +496,21 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
renderCell = (_, record, index) => {
const key = getRowKey(record, index);
const checked = keySet.has(key);
const checkboxProps = checkboxPropsMap.get(key);
return {
node: (
<Radio
{...checkboxPropsMap.get(key)}
{...checkboxProps}
checked={checked}
onClick={(e) => e.stopPropagation()}
onClick={(e) => {
e.stopPropagation();
checkboxProps?.onClick?.(e);
}}
onChange={(event) => {
if (!keySet.has(key)) {
triggerSingleSelection(key, true, [key], event.nativeEvent);
}
checkboxProps?.onChange?.(event);
}}
/>
),
@ -538,8 +542,12 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
indeterminate={mergedIndeterminate}
checked={checked}
skipGroup
onClick={(e) => e.stopPropagation()}
onChange={({ nativeEvent }) => {
onClick={(e) => {
e.stopPropagation();
checkboxProps?.onClick?.(e);
}}
onChange={(event) => {
const { nativeEvent } = event;
const { shiftKey } = nativeEvent;
const currentSelectedIndex = recordKeys.findIndex((item) => item === key);
const isMultiple = derivedSelectedKeys.some((item) => recordKeys.includes(item));
@ -595,6 +603,7 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
} else {
updatePrevSelectedIndex(currentSelectedIndex);
}
checkboxProps?.onChange?.(event);
}}
/>
),