From c6c3112a78d02222af7a3baf53132618b69f2ecb Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Tue, 30 Aug 2022 14:24:46 -0400
Subject: [PATCH] fix(NumberInput): prevent errors when onChange is passed via
 inputProps

---
 .../components/NumberInput/NumberInput.tsx    |  2 +-
 .../__tests__/NumberInput.test.tsx            | 49 +++++++++++++------
 2 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/packages/react-core/src/components/NumberInput/NumberInput.tsx b/packages/react-core/src/components/NumberInput/NumberInput.tsx
index b2dd069f0b2..f74f09cc0d0 100644
--- a/packages/react-core/src/components/NumberInput/NumberInput.tsx
+++ b/packages/react-core/src/components/NumberInput/NumberInput.tsx
@@ -129,6 +129,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
           </span>
         </Button>
         <TextInput
+          {...inputProps}
           type="number"
           value={value}
           name={inputName}
@@ -139,7 +140,6 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
           {...(!onChange && { isReadOnly: true })}
           onKeyDown={keyDownHandler}
           validated={validated}
-          {...inputProps}
         />
         <Button
           variant="control"
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 4165860f9ec..1a9a4e09de3 100644
--- a/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx
+++ b/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx
@@ -10,19 +10,19 @@ describe('numberInput', () => {
   });
 
   test('renders success validated', () => {
-    const { asFragment } = render(<NumberInput validated='success' />);
+    const { asFragment } = render(<NumberInput validated="success" />);
     expect(asFragment()).toMatchSnapshot();
-  })
+  });
 
   test('renders error validated', () => {
-    const { asFragment } = render(<NumberInput validated='error' />);
+    const { asFragment } = render(<NumberInput validated="error" />);
     expect(asFragment()).toMatchSnapshot();
-  })
+  });
 
   test('renders warning validated', () => {
-    const { asFragment } = render(<NumberInput validated='warning' />);
+    const { asFragment } = render(<NumberInput validated="warning" />);
     expect(asFragment()).toMatchSnapshot();
-  })
+  });
 
   test('renders value', () => {
     const { asFragment } = render(<NumberInput value={90} />);
@@ -136,37 +136,37 @@ describe('numberInput', () => {
 
   test('removes leading zeros from a positive whole number', () => {
     render(<NumberInput value={10} onChange={() => {}} />);
-  
+
     const input = screen.getByRole('spinbutton');
     userEvent.type(input, '{arrowleft}{arrowleft}0');
     expect(input).toHaveDisplayValue('010');
-  
+
     userEvent.click(document.body);
-  
+
     expect(input).toHaveDisplayValue('10');
   });
 
   test('removes leading zeros from a negative whole number', () => {
     render(<NumberInput value={-18} onChange={() => {}} />);
-  
+
     const input = screen.getByRole('spinbutton');
     userEvent.type(input, '{arrowleft}{arrowleft}0');
     expect(input).toHaveDisplayValue('-018');
-  
+
     userEvent.click(document.body);
-  
+
     expect(input).toHaveDisplayValue('-18');
   });
 
   test('removes leading zeros from a decimal number', () => {
     render(<NumberInput value={47.01} onChange={() => {}} />);
-  
+
     const input = screen.getByRole('spinbutton');
     userEvent.type(input, '{arrowleft}{arrowleft}{arrowleft}{arrowleft}{arrowleft}0');
     expect(input).toHaveDisplayValue('047.01');
-  
+
     userEvent.click(document.body);
-  
+
     expect(input).toHaveDisplayValue('47.01');
   });
 
@@ -187,4 +187,23 @@ describe('numberInput', () => {
     const input = screen.getByRole('spinbutton');
     expect(input).toHaveDisplayValue('0');
   });
+
+  test('does not throw an error if onChange is passed via inputProps as well as the onChange prop', () => {
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const NumberInputWrapper = () => {
+      const [value, setValue] = React.useState(0);
+      const onChange = event => setValue(event.currentTarget.value);
+      const inputProps = { onChange: onChange };
+
+      return <NumberInput value={value} onChange={onChange} inputProps={{ ...inputProps }} />;
+    };
+
+    render(<NumberInputWrapper />);
+
+    const input = screen.getByRole('spinbutton');
+    userEvent.type(input, '0');
+
+    expect(consoleSpy).not.toHaveBeenCalled();
+  });
 });