Prevent Scrolling From Altering Amount Field (#1234)

* Prevent scrolling to adjust number input.

* Blur instead, less annoying.

common/components/ui/Input.tsx

@@ -9,6 +9,7 @@ class Input extends React.Component<HTMLProps<HTMLInputElement>, State> {
   public state: State = {
     hasBlurred: false
   };
+
   public render() {
     return (
       <input
@@ -19,12 +20,21 @@ class Input extends React.Component<HTMLProps<HTMLInputElement>, State> {
             this.props.onBlur(e);
           }
         }}
+        onWheel={this.props.type === 'number' ? this.preventNumberScroll : undefined}
         className={`input-group-input  ${this.props.className} ${
           this.state.hasBlurred ? 'has-blurred' : ''
         } ${!!this.props.value && this.props.value.toString().length > 0 ? 'has-value' : ''}`}
       />
     );
   }
+
+  // When number inputs are scrolled on while in focus, the number changes. So we blur
+  // it if it's focused to prevent that behavior, without preventing the scroll.
+  private preventNumberScroll(ev: React.WheelEvent<HTMLInputElement>) {
+    if (document.activeElement === ev.currentTarget) {
+      ev.currentTarget.blur();
+    }
+  }
 }
 
 export default Input;