Browse Source

fix: tooltip cannot close on disabled Radio (#36483)

* fix: tooltip cannot close on disabled Radio

* test: add test
pull/36495/head
MadCcc 2 years ago
committed by GitHub
parent
commit
4f7ac9f6bc
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      components/radio/index.tsx
  2. 20
      components/tooltip/__tests__/tooltip.test.js
  3. 3
      components/tooltip/index.tsx

2
components/radio/index.tsx

@ -18,9 +18,11 @@ interface CompoundedComponent
extends React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLElement>> {
Group: typeof Group;
Button: typeof Button;
__ANT_RADIO: boolean;
}
const Radio = InternalRadio as CompoundedComponent;
Radio.Button = Button;
Radio.Group = Group;
Radio.__ANT_RADIO = true;
export default Radio;

20
components/tooltip/__tests__/tooltip.test.js

@ -9,6 +9,7 @@ import DatePicker from '../../date-picker';
import Input from '../../input';
import Group from '../../input/Group';
import Switch from '../../switch';
import Radio from '../../radio';
describe('Tooltip', () => {
mountTest(Tooltip);
@ -402,4 +403,23 @@ describe('Tooltip', () => {
expect(onVisibleChange).toHaveBeenLastCalledWith(true);
expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
});
it('should work with disabled Radio', () => {
const onVisibleChange = jest.fn();
const { container } = render(
<Tooltip
title="loading tips"
mouseEnterDelay={0}
mouseLeaveDelay={0}
onVisibleChange={onVisibleChange}
>
<Radio disabled />
</Tooltip>,
);
const wrapperEl = container.querySelectorAll('.ant-tooltip-disabled-compatible-wrapper');
expect(wrapperEl).toHaveLength(1);
fireEvent.mouseEnter(container.getElementsByTagName('span')[0]);
expect(onVisibleChange).toHaveBeenLastCalledWith(true);
expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
});
});

3
components/tooltip/index.tsx

@ -87,7 +87,8 @@ function getDisabledCompatibleChildren(element: React.ReactElement<any>, prefixC
const elementType = element.type as any;
if (
((elementType.__ANT_BUTTON === true || element.type === 'button') && element.props.disabled) ||
(elementType.__ANT_SWITCH === true && (element.props.disabled || element.props.loading))
(elementType.__ANT_SWITCH === true && (element.props.disabled || element.props.loading)) ||
(elementType.__ANT_RADIO === true && element.props.disabled)
) {
// Pick some layout related style properties up to span
// Prevent layout bugs like https://github.com/ant-design/ant-design/issues/5254

Loading…
Cancel
Save