From ef381623996412a01a0eebf45e527edcd648b1b6 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 7 Jul 2021 10:22:00 -0400
Subject: [PATCH] fix(NumberInput): allow value to be outside min/max, show
 validation (#9121)

* fix(NumberInput): allow value to be outside min/max, show validation

* test(NumberInput): update tests

Co-authored-by: Scott Strubberg <sstrubberg@protonmail.com>
---
 .../components/NumberInput/NumberInput-test.js   | 16 +++++++++-------
 .../src/components/NumberInput/NumberInput.js    |  6 ++++--
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/NumberInput/NumberInput-test.js b/packages/react/src/components/NumberInput/NumberInput-test.js
index 2b4a914b7b35..eea926c3a337 100644
--- a/packages/react/src/components/NumberInput/NumberInput-test.js
+++ b/packages/react/src/components/NumberInput/NumberInput-test.js
@@ -151,6 +151,7 @@ describe('NumberInput', () => {
               id="test"
               label="Number Input"
               className="extra-class"
+              invalidText="Number is not valid"
             />
           );
         const getNumberInput = (wrapper) => wrapper.find('input');
@@ -185,10 +186,13 @@ describe('NumberInput', () => {
           expect(numberInput.prop('value')).toEqual(1);
         });
 
-        it('should set value to equal min when value < min', () => {
+        it('should set value when value < min and set invalid state', () => {
           let wrapper = getWrapper(5, 100, 0);
           let numberInput = wrapper.find('input');
-          expect(numberInput.prop('value')).toEqual(5);
+          let invalidText = wrapper.find(`.${prefix}--form-requirement`);
+          expect(numberInput.prop('value')).toEqual(0);
+          expect(invalidText.length).toEqual(1);
+          expect(invalidText.text()).toEqual('Number is not valid');
         });
 
         it('should set value when min is undefined', () => {
@@ -238,19 +242,17 @@ describe('NumberInput', () => {
           expect(wrapper.find('NumberInput').instance().state.value).toEqual(2);
         });
 
-        it('should cap the number given to value prop', () => {
+        it('should not cap the number given to value prop', () => {
           // Enzyme doesn't seem to allow setState() in a forwardRef-wrapped class component
           wrapper.find('NumberInput').instance().setState({ value: 0 });
           wrapper.update();
           wrapper.setProps({ value: 5, min: 10, max: 20 });
           // Enzyme doesn't seem to allow state() in a forwardRef-wrapped class component
-          expect(wrapper.find('NumberInput').instance().state.value).toEqual(
-            10
-          );
+          expect(wrapper.find('NumberInput').instance().state.value).toEqual(5);
           wrapper.setProps({ value: 25, min: 10, max: 20 });
           // Enzyme doesn't seem to allow state() in a forwardRef-wrapped class component
           expect(wrapper.find('NumberInput').instance().state.value).toEqual(
-            20
+            25
           );
         });
 
diff --git a/packages/react/src/components/NumberInput/NumberInput.js b/packages/react/src/components/NumberInput/NumberInput.js
index 701e1ca604ad..6d795958f1a5 100644
--- a/packages/react/src/components/NumberInput/NumberInput.js
+++ b/packages/react/src/components/NumberInput/NumberInput.js
@@ -202,7 +202,7 @@ class NumberInput extends Component {
     translateWithId: (id) => defaultTranslations[id],
   };
 
-  static getDerivedStateFromProps({ min, max, value }, state) {
+  static getDerivedStateFromProps({ value }, state) {
     const { prevValue } = state;
 
     if (useControlledStateWithValue && value === '' && prevValue !== '') {
@@ -214,10 +214,12 @@ class NumberInput extends Component {
 
     // If `useControlledStateWithValue` feature flag is on, do nothing here.
     // Otherwise, do prop -> state sync with "value capping".
+    //// Value capping removed in #8965
+    //// value: capMax(max, capMin(min, value)), (L223)
     return useControlledStateWithValue || prevValue === value
       ? null
       : {
-          value: capMax(max, capMin(min, value)),
+          value,
           prevValue: value,
         };
   }