Skip to content

Commit

Permalink
fix(input): prevent mouse wheel from changing field value
Browse files Browse the repository at this point in the history 
Fixes: #299
  • Loading branch information
@tripleWdotcom @boilund
tripleWdotcom authored and boilund committed Dec 1, 2023
1 parent ee79385 commit 8d3b408
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 0 deletions.
11 changes: 11 additions & 0 deletions packages/core/src/Input/Input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
RefObject,
KeyboardEventHandler,
MouseEventHandler,
FocusEventHandler,
} from 'react'
import styled, { css, useTheme } from 'styled-components'

Expand Down Expand Up @@ -402,6 +403,15 @@ function Input<T extends string | NumberInputType>({
[onChange, onValueChange, type]
)

// Prevent the mouse wheel from increasing/deacreasing the number
const handleFocus = useCallback<FocusEventHandler<HTMLInputElement>>(e => {
if (type === 'number') {
e.target.addEventListener('wheel', ev => ev.preventDefault(), {
passive: false,
})
}
}, [])

return (
<InputContainer
disabled={disabled}
Expand All @@ -427,6 +437,7 @@ function Input<T extends string | NumberInputType>({
}
onChange={handleChange}
onKeyUp={handleKeyUp}
onFocus={handleFocus}
/>
{(type === 'current-password' || type === 'new-password') &&
props.value !== '' ? (
Expand Down
29 changes: 29 additions & 0 deletions packages/core/src/Input/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,7 @@ exports[`TextInput NumberInput 1`] = `
className="c3"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="number"
Expand Down Expand Up @@ -296,6 +297,7 @@ exports[`TextInput NumberInput 2`] = `
className="c3"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="number"
Expand Down Expand Up @@ -456,6 +458,7 @@ exports[`TextInput NumberInput 3`] = `
className="c3"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
placeholder="Number"
spellCheck={false}
Expand Down Expand Up @@ -621,6 +624,7 @@ exports[`TextInput NumberInput 4`] = `
className="c3"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="number"
Expand Down Expand Up @@ -789,6 +793,7 @@ exports[`TextInput NumberInput 5`] = `
className="c3"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="number"
Expand Down Expand Up @@ -961,6 +966,7 @@ exports[`TextInput NumberInput 6`] = `
className="c3"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="number"
Expand Down Expand Up @@ -1137,6 +1143,7 @@ exports[`TextInput NumberInput 7`] = `
className="c3"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="number"
Expand Down Expand Up @@ -1313,6 +1320,7 @@ exports[`TextInput NumberInput 8`] = `
className="c3"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="number"
Expand Down Expand Up @@ -1495,6 +1503,7 @@ exports[`TextInput NumberInput 9`] = `
className="c3"
disabled={true}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="number"
Expand Down Expand Up @@ -1771,6 +1780,7 @@ exports[`TextInput NumberInput 10`] = `
className="c3"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="number"
Expand Down Expand Up @@ -1942,6 +1952,7 @@ exports[`TextInput TextInput 1`] = `
className="c3"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="text"
Expand Down Expand Up @@ -2096,6 +2107,7 @@ exports[`TextInput TextInput 2`] = `
className="c3"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="text"
Expand Down Expand Up @@ -2254,6 +2266,7 @@ exports[`TextInput TextInput 3`] = `
className="c3"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="text"
Expand Down Expand Up @@ -2416,6 +2429,7 @@ exports[`TextInput TextInput 4`] = `
className="c3"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="text"
Expand Down Expand Up @@ -2582,6 +2596,7 @@ exports[`TextInput TextInput 5`] = `
className="c3"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="text"
Expand Down Expand Up @@ -2752,6 +2767,7 @@ exports[`TextInput TextInput 6`] = `
className="c3"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="text"
Expand Down Expand Up @@ -2922,6 +2938,7 @@ exports[`TextInput TextInput 7`] = `
className="c3"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="text"
Expand Down Expand Up @@ -3098,6 +3115,7 @@ exports[`TextInput TextInput 8`] = `
className="c3"
disabled={true}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="text"
Expand Down Expand Up @@ -3368,6 +3386,7 @@ exports[`TextInput TextInput 9`] = `
className="c3"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="text"
Expand Down Expand Up @@ -3534,6 +3553,7 @@ exports[`TextInput TextInputCredentials 1`] = `
className="c3"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="username"
Expand Down Expand Up @@ -3733,6 +3753,7 @@ exports[`TextInput TextInputCredentials 2`] = `
className="c4"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="password"
Expand Down Expand Up @@ -3953,6 +3974,7 @@ exports[`TextInput TextInputCredentials 3`] = `
className="c4"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
spellCheck={false}
type="password"
Expand Down Expand Up @@ -4497,6 +4519,7 @@ exports[`TextInput TimeInput 1`] = `
className="c4"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
spellCheck={false}
Expand All @@ -4523,6 +4546,7 @@ exports[`TextInput TimeInput 1`] = `
className="c4"
disabled={true}
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
readOnly={true}
Expand Down Expand Up @@ -4595,6 +4619,7 @@ exports[`TextInput TimeInput 1`] = `
className="c4"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
spellCheck={false}
Expand Down Expand Up @@ -4638,6 +4663,7 @@ exports[`TextInput TimeInput 1`] = `
className="c4"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
spellCheck={false}
Expand All @@ -4664,6 +4690,7 @@ exports[`TextInput TimeInput 1`] = `
className="c4"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
spellCheck={false}
Expand Down Expand Up @@ -4704,6 +4731,7 @@ exports[`TextInput TimeInput 1`] = `
className="c4"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
spellCheck={false}
Expand Down Expand Up @@ -4752,6 +4780,7 @@ exports[`TextInput TimeInput 1`] = `
className="c4"
disabled={false}
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
spellCheck={false}
Expand Down

0 comments on commit 8d3b408

Please sign in to comment.