archive/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-15 13:38:29 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(InputNumber): fix suffix shift on hover in readonly state (#54585)

Browse source
This commit is contained in:
𝑾𝒖𝒙𝒉 2025-08-05 11:06:32 +08:00 • committed by GitHub
parent f5f8967148
commit 5f75711a80
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 10 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

20
components/input-number/__tests__/suffix.test.tsx
View file

@ -17,20 +17,16 @@ describe('suffix', () => {
expect(mockFocus).toHaveBeenCalled();
});
it('should has classname when without controls', () => {
const { container } = render(<InputNumber suffix={<i>antd</i>} controls={false} />);
it.each([
['controls=false', { controls: false }],
// https://github.com/ant-design/ant-design/issues/53181
['disabled', { disabled: true }],
// https://github.com/ant-design/ant-design/discussions/54583
['readOnly', { readOnly: true }],
])('should not show the control buttons when inputNumber is %s', (_, props) => {
const { container } = render(<InputNumber suffix="RMB" style={{ width: '100%' }} {...props} />);
expect(
container.querySelector('.ant-input-number-affix-wrapper-without-controls'),
).toBeTruthy();
});
it('should not show the control buttons when inputNumber is disabled', () => {
// Since the hover effect cannot be tested in the jsdom environment
// Just to make sure whether there is a corresponding classname
const { container } = render(<InputNumber suffix="RMB" style={{ width: '100%' }} disabled />);
expect(container.querySelector('.ant-input-number-affix-wrapper')).toHaveClass(
'ant-input-number-affix-wrapper-without-controls',
);
});
});

3
components/input-number/index.tsx
View file

@ -170,7 +170,8 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
[`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small',
[`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large',
[`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
[`${prefixCls}-affix-wrapper-without-controls`]: controls === false || mergedDisabled,
[`${prefixCls}-affix-wrapper-without-controls`]:
controls === false || mergedDisabled || readOnly,
},
hashId,
),