mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 12:39:49 +08:00
fix(Table): preserve custom event handlers in row selection (#51661)
This commit is contained in:
parent
fb52fbbfd0
commit
4b186714d0
@ -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');
|
||||
});
|
||||
});
|
||||
|
@ -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);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
|
Loading…
Reference in New Issue
Block a user