diff --git a/packages/react-core/src/components/NumberInput/NumberInput.tsx b/packages/react-core/src/components/NumberInput/NumberInput.tsx index 84ccd70a307..a1097ceca97 100644 --- a/packages/react-core/src/components/NumberInput/NumberInput.tsx +++ b/packages/react-core/src/components/NumberInput/NumberInput.tsx @@ -139,7 +139,7 @@ export const NumberInput: React.FunctionComponent = ({ {...(isDisabled && { isDisabled })} {...(onChange && { onChange: (event, _value) => onChange(event) })} onBlur={handleBlur} - {...(!onChange && { isReadOnly: true })} + {...(!onChange && { readOnlyVariant: "default" })} onKeyDown={keyDownHandler} validated={validated} /> diff --git a/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx b/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx index 81b38cbf6f1..9ce05ff44c5 100644 --- a/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx +++ b/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx @@ -231,4 +231,17 @@ describe('numberInput', () => { expect(consoleSpy).not.toHaveBeenCalled(); }); + + test('input is read only if onChange not passed ', () => { + render(); + const input = screen.getByLabelText('readonly input'); + expect(input).toHaveAttribute('readOnly'); + }); + + test('input is not read only if onChange passed ', () => { + const onChangeMock = jest.fn(); + render(); + const input = screen.getByLabelText('not readonly input'); + expect(input).not.toHaveAttribute('readOnly'); + }); }); diff --git a/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap b/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap index a433f7ef8a1..d745f5ce71e 100644 --- a/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap +++ b/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap @@ -44,7 +44,7 @@ exports[`numberInput disables lower threshold 1`] = ` class="pf-v5-c-input-group__item" >
@@ -136,7 +137,7 @@ exports[`numberInput disables upper threshold 1`] = ` class="pf-v5-c-input-group__item" >
@@ -230,7 +232,7 @@ exports[`numberInput passes button props successfully 1`] = ` class="pf-v5-c-input-group__item" >
@@ -417,7 +420,7 @@ exports[`numberInput renders custom width 1`] = ` class="pf-v5-c-input-group__item" >
@@ -510,7 +514,7 @@ exports[`numberInput renders defaults & extra props 1`] = ` class="pf-v5-c-input-group__item" >
@@ -603,7 +608,7 @@ exports[`numberInput renders disabled 1`] = ` class="pf-v5-c-input-group__item" >
@@ -697,7 +703,7 @@ exports[`numberInput renders error validated 1`] = ` class="pf-v5-c-input-group__item" >
@@ -810,7 +817,7 @@ exports[`numberInput renders success validated 1`] = ` class="pf-v5-c-input-group__item" >
@@ -928,7 +936,7 @@ exports[`numberInput renders unit & position 1`] = ` class="pf-v5-c-input-group__item" >
@@ -1020,7 +1029,7 @@ exports[`numberInput renders unit 1`] = ` class="pf-v5-c-input-group__item" >
@@ -1117,7 +1127,7 @@ exports[`numberInput renders value 1`] = ` class="pf-v5-c-input-group__item" >
@@ -1209,7 +1220,7 @@ exports[`numberInput renders warning validated 1`] = ` class="pf-v5-c-input-group__item" >