status-im
/
MyCrypto
mirror of https://github.com/status-im/MyCrypto.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Prevent Scrolling From Altering Amount Field (#1234) 

* Prevent scrolling to adjust number input.

* Blur instead, less annoying.
This commit is contained in:
William O'Beirne 2018-03-03 14:11:05 -05:00 committed by Daniel Ternyak
parent 4dd0fc9785
commit 6927aa0b55
1 changed files with 10 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
common/components/ui/Input.tsx
View File

@ -9,6 +9,7 @@ class Input extends React.Component<HTMLProps<HTMLInputElement>, State> {
public state: State = { public state: State = {
hasBlurred: false hasBlurred: false
}; };
public render() { public render() {
return ( return (
<input <input
@ -19,12 +20,21 @@ class Input extends React.Component<HTMLProps<HTMLInputElement>, State> {
this.props.onBlur(e); this.props.onBlur(e);
} }
}} }}
onWheel={this.props.type === 'number' ? this.preventNumberScroll : undefined}
className={`input-group-input ${this.props.className} ${ className={`input-group-input ${this.props.className} ${
this.state.hasBlurred ? 'has-blurred' : '' this.state.hasBlurred ? 'has-blurred' : ''
} ${!!this.props.value && this.props.value.toString().length > 0 ? 'has-value' : ''}`} } ${!!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; export default Input;