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