diff --git a/components/input-number/__tests__/index.test.tsx b/components/input-number/__tests__/index.test.tsx index 6e670602dd..2d52219f8c 100644 --- a/components/input-number/__tests__/index.test.tsx +++ b/components/input-number/__tests__/index.test.tsx @@ -5,6 +5,7 @@ import focusTest from '../../../tests/shared/focusTest'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { fireEvent, render } from '../../../tests/utils'; +import Button from '../../button'; describe('InputNumber', () => { focusTest(InputNumber, { refFocus: true }); @@ -69,4 +70,30 @@ describe('InputNumber', () => { container.querySelector('.anticon-arrow-down')?.className.includes('my-class-name'), ).toBe(true); }); + + it('renders correctly when the controlled mode number is out of range', () => { + const App: React.FC = () => { + const [value, setValue] = React.useState(1); + return ( + <> + setValue(v)} /> + + + ); + }; + const { container } = render(); + fireEvent.click(container.querySelector('button')!); + expect( + container + .querySelector('.ant-input-number') + ?.className.includes('ant-input-number-out-of-range'), + ).toBe(true); + }); }); diff --git a/components/input-number/style/index.ts b/components/input-number/style/index.ts index 8b47461d45..bcfdeefdf0 100644 --- a/components/input-number/style/index.ts +++ b/components/input-number/style/index.ts @@ -108,8 +108,10 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe // ===================== Out Of Range ===================== '&-out-of-range': { - input: { - color: colorError, + [`${componentCls}-input-wrap`]: { + input: { + color: colorError, + }, }, },