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>
carbon-design-system · Jul 7, 2021 · ef38162 · ef38162
1 parent 0e2b53b
commit ef38162
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git 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
@@ -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,
         };
   }