diff --git a/common/components/ui/Input.tsx b/common/components/ui/Input.tsx index 6643287f..16895e80 100644 --- a/common/components/ui/Input.tsx +++ b/common/components/ui/Input.tsx @@ -9,6 +9,7 @@ class Input extends React.Component, State> { public state: State = { hasBlurred: false }; + public render() { return ( , 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) { + if (document.activeElement === ev.currentTarget) { + ev.currentTarget.blur(); + } + } } export default Input;