feat(number input): added a prop to disable the wheel functionality (#…

…12358)

* feat(number input): added a prop to disable the wheel functionality

* fix(test snapshot): fixed test snapshot in public api test

* feat(number input): changed approach (manually disabling it)

* chore(contributors): add to list of contributors

Co-authored-by: Scott Strubberg <sstrubberg@protonmail.com>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.all-contributorsrc

@@ -931,6 +931,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "mgueyraud",
+      "name": "Mario Gueyraud",
+      "avatar_url": "https://avatars.githubusercontent.com/u/9916318?v=4",
+      "profile": "https://github.com/mgueyraud",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

README.md

@@ -205,6 +205,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="http://torresga.github.io/"><img src="https://avatars.githubusercontent.com/u/6892410?v=4?s=100" width="100px;" alt=""/><br /><sub><b>G. Torres</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=torresga" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/FionaDL"><img src="https://avatars.githubusercontent.com/u/28625558?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Fiona</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=FionaDL" title="Code">💻</a></td>
     <td align="center"><a href="https://lewisdavanzo.com/"><img src="https://avatars.githubusercontent.com/u/70274722?v=4?s=100" width="100px;" alt=""/><br /><sub><b>kindoflew</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=kindoflew" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/mgueyraud"><img src="https://avatars.githubusercontent.com/u/9916318?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mario Gueyraud</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=mgueyraud" title="Code">💻</a></td>
   </tr>
 </table>
 

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -4969,6 +4969,9 @@ Map {
         ],
         "type": "oneOfType",
       },
+      "disableWheel": Object {
+        "type": "bool",
+      },
       "disabled": Object {
         "type": "bool",
       },

packages/react/src/components/NumberInput/NumberInput.js

@@ -31,6 +31,7 @@ const NumberInput = React.forwardRef(function NumberInput(props, forwardRef) {
     allowEmpty = false,
     className: customClassName,
     disabled = false,
+    disableWheel: disableWheelProp = false,
     defaultValue,
     helperText = '',
     hideLabel = false,
@@ -163,6 +164,24 @@ const NumberInput = React.forwardRef(function NumberInput(props, forwardRef) {
             onClick={onClick}
             onChange={handleOnChange}
             onKeyUp={onKeyUp}
+            onFocus={(e) => {
+              if (disableWheelProp) {
+                e.target.addEventListener('wheel', disableWheel);
+              }
+
+              if (rest.onFocus) {
+                rest.onFocus(e);
+              }
+            }}
+            onBlur={(e) => {
+              if (disableWheelProp) {
+                e.target.removeEventListener('wheel', disableWheel);
+              }
+
+              if (rest.onBlur) {
+                rest.onBlur(e);
+              }
+            }}
             pattern="[0-9]*"
             readOnly={readOnly}
             step={step}
@@ -253,6 +272,11 @@ NumberInput.propTypes = {
    */
   defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
+  /**
+   * Specify if the wheel functionality for the input should be disabled, or not
+   */
+  disableWheel: PropTypes.bool,
+
   /**
    * Specify if the control should be disabled, or not
    */
@@ -442,6 +466,24 @@ function getInputValidity({ allowEmpty, invalid, value, max, min }) {
   return true;
 }
 
+/**
+ * It prevents any wheel event from emitting.
+ *
+ * We want to prevent this input field from changing by the user accidentally
+ * when the user scrolling up or down in a long form. So we prevent the default
+ * behavior of wheel events when it is focused.
+ *
+ * Because React uses passive event handler by default, we can't just call
+ * `preventDefault` in the `onWheel` event handler. So we have to get the input
+ * ref and add our event handler manually.
+ *
+ * @see https://github.com/facebook/react/pull/19654
+ * @param {WheelEvent} e A wheel event.
+ */
+function disableWheel(e) {
+  e.preventDefault();
+}
+
 /**
  * Clamp the given value between the upper bound `max` and the lower bound `min`
  * @param {number} max