Skip to content
This repository was archived by the owner on Mar 25, 2025. It is now read-only.

Commit 8d3b408

Browse files
tripleWdotcomboilund
tripleWdotcom
authored and
boilund
committed
fix(input): prevent mouse wheel from changing field value
Fixes: #299
1 parent ee79385 commit 8d3b408

File tree

2 files changed

+40
-0
lines changed

2 files changed

+40
-0
lines changed

‎packages/core/src/Input/Input.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
RefObject,
1010
KeyboardEventHandler,
1111
MouseEventHandler,
12+
FocusEventHandler,
1213
} from 'react'
1314
import styled, { css, useTheme } from 'styled-components'
1415

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

406+
// Prevent the mouse wheel from increasing/deacreasing the number
407+
const handleFocus = useCallback<FocusEventHandler<HTMLInputElement>>(e => {
408+
if (type === 'number') {
409+
e.target.addEventListener('wheel', ev => ev.preventDefault(), {
410+
passive: false,
411+
})
412+
}
413+
}, [])
414+
405415
return (
406416
<InputContainer
407417
disabled={disabled}
@@ -427,6 +437,7 @@ function Input<T extends string | NumberInputType>({
427437
}
428438
onChange={handleChange}
429439
onKeyUp={handleKeyUp}
440+
onFocus={handleFocus}
430441
/>
431442
{(type === 'current-password' || type === 'new-password') &&
432443
props.value !== '' ? (

‎packages/core/src/Input/__snapshots__/index.test.tsx.snap

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,7 @@ exports[`TextInput NumberInput 1`] = `
136136
className="c3"
137137
disabled={false}
138138
onChange={[Function]}
139+
onFocus={[Function]}
139140
onKeyUp={[Function]}
140141
spellCheck={false}
141142
type="number"
@@ -296,6 +297,7 @@ exports[`TextInput NumberInput 2`] = `
296297
className="c3"
297298
disabled={false}
298299
onChange={[Function]}
300+
onFocus={[Function]}
299301
onKeyUp={[Function]}
300302
spellCheck={false}
301303
type="number"
@@ -456,6 +458,7 @@ exports[`TextInput NumberInput 3`] = `
456458
className="c3"
457459
disabled={false}
458460
onChange={[Function]}
461+
onFocus={[Function]}
459462
onKeyUp={[Function]}
460463
placeholder="Number"
461464
spellCheck={false}
@@ -621,6 +624,7 @@ exports[`TextInput NumberInput 4`] = `
621624
className="c3"
622625
disabled={false}
623626
onChange={[Function]}
627+
onFocus={[Function]}
624628
onKeyUp={[Function]}
625629
spellCheck={false}
626630
type="number"
@@ -789,6 +793,7 @@ exports[`TextInput NumberInput 5`] = `
789793
className="c3"
790794
disabled={false}
791795
onChange={[Function]}
796+
onFocus={[Function]}
792797
onKeyUp={[Function]}
793798
spellCheck={false}
794799
type="number"
@@ -961,6 +966,7 @@ exports[`TextInput NumberInput 6`] = `
961966
className="c3"
962967
disabled={false}
963968
onChange={[Function]}
969+
onFocus={[Function]}
964970
onKeyUp={[Function]}
965971
spellCheck={false}
966972
type="number"
@@ -1137,6 +1143,7 @@ exports[`TextInput NumberInput 7`] = `
11371143
className="c3"
11381144
disabled={false}
11391145
onChange={[Function]}
1146+
onFocus={[Function]}
11401147
onKeyUp={[Function]}
11411148
spellCheck={false}
11421149
type="number"
@@ -1313,6 +1320,7 @@ exports[`TextInput NumberInput 8`] = `
13131320
className="c3"
13141321
disabled={false}
13151322
onChange={[Function]}
1323+
onFocus={[Function]}
13161324
onKeyUp={[Function]}
13171325
spellCheck={false}
13181326
type="number"
@@ -1495,6 +1503,7 @@ exports[`TextInput NumberInput 9`] = `
14951503
className="c3"
14961504
disabled={true}
14971505
onChange={[Function]}
1506+
onFocus={[Function]}
14981507
onKeyUp={[Function]}
14991508
spellCheck={false}
15001509
type="number"
@@ -1771,6 +1780,7 @@ exports[`TextInput NumberInput 10`] = `
17711780
className="c3"
17721781
disabled={false}
17731782
onChange={[Function]}
1783+
onFocus={[Function]}
17741784
onKeyUp={[Function]}
17751785
spellCheck={false}
17761786
type="number"
@@ -1942,6 +1952,7 @@ exports[`TextInput TextInput 1`] = `
19421952
className="c3"
19431953
disabled={false}
19441954
onChange={[Function]}
1955+
onFocus={[Function]}
19451956
onKeyUp={[Function]}
19461957
spellCheck={false}
19471958
type="text"
@@ -2096,6 +2107,7 @@ exports[`TextInput TextInput 2`] = `
20962107
className="c3"
20972108
disabled={false}
20982109
onChange={[Function]}
2110+
onFocus={[Function]}
20992111
onKeyUp={[Function]}
21002112
spellCheck={false}
21012113
type="text"
@@ -2254,6 +2266,7 @@ exports[`TextInput TextInput 3`] = `
22542266
className="c3"
22552267
disabled={false}
22562268
onChange={[Function]}
2269+
onFocus={[Function]}
22572270
onKeyUp={[Function]}
22582271
spellCheck={false}
22592272
type="text"
@@ -2416,6 +2429,7 @@ exports[`TextInput TextInput 4`] = `
24162429
className="c3"
24172430
disabled={false}
24182431
onChange={[Function]}
2432+
onFocus={[Function]}
24192433
onKeyUp={[Function]}
24202434
spellCheck={false}
24212435
type="text"
@@ -2582,6 +2596,7 @@ exports[`TextInput TextInput 5`] = `
25822596
className="c3"
25832597
disabled={false}
25842598
onChange={[Function]}
2599+
onFocus={[Function]}
25852600
onKeyUp={[Function]}
25862601
spellCheck={false}
25872602
type="text"
@@ -2752,6 +2767,7 @@ exports[`TextInput TextInput 6`] = `
27522767
className="c3"
27532768
disabled={false}
27542769
onChange={[Function]}
2770+
onFocus={[Function]}
27552771
onKeyUp={[Function]}
27562772
spellCheck={false}
27572773
type="text"
@@ -2922,6 +2938,7 @@ exports[`TextInput TextInput 7`] = `
29222938
className="c3"
29232939
disabled={false}
29242940
onChange={[Function]}
2941+
onFocus={[Function]}
29252942
onKeyUp={[Function]}
29262943
spellCheck={false}
29272944
type="text"
@@ -3098,6 +3115,7 @@ exports[`TextInput TextInput 8`] = `
30983115
className="c3"
30993116
disabled={true}
31003117
onChange={[Function]}
3118+
onFocus={[Function]}
31013119
onKeyUp={[Function]}
31023120
spellCheck={false}
31033121
type="text"
@@ -3368,6 +3386,7 @@ exports[`TextInput TextInput 9`] = `
33683386
className="c3"
33693387
disabled={false}
33703388
onChange={[Function]}
3389+
onFocus={[Function]}
33713390
onKeyUp={[Function]}
33723391
spellCheck={false}
33733392
type="text"
@@ -3534,6 +3553,7 @@ exports[`TextInput TextInputCredentials 1`] = `
35343553
className="c3"
35353554
disabled={false}
35363555
onChange={[Function]}
3556+
onFocus={[Function]}
35373557
onKeyUp={[Function]}
35383558
spellCheck={false}
35393559
type="username"
@@ -3733,6 +3753,7 @@ exports[`TextInput TextInputCredentials 2`] = `
37333753
className="c4"
37343754
disabled={false}
37353755
onChange={[Function]}
3756+
onFocus={[Function]}
37363757
onKeyUp={[Function]}
37373758
spellCheck={false}
37383759
type="password"
@@ -3953,6 +3974,7 @@ exports[`TextInput TextInputCredentials 3`] = `
39533974
className="c4"
39543975
disabled={false}
39553976
onChange={[Function]}
3977+
onFocus={[Function]}
39563978
onKeyUp={[Function]}
39573979
spellCheck={false}
39583980
type="password"
@@ -4497,6 +4519,7 @@ exports[`TextInput TimeInput 1`] = `
44974519
className="c4"
44984520
disabled={false}
44994521
onChange={[Function]}
4522+
onFocus={[Function]}
45004523
onKeyDown={[Function]}
45014524
onKeyUp={[Function]}
45024525
spellCheck={false}
@@ -4523,6 +4546,7 @@ exports[`TextInput TimeInput 1`] = `
45234546
className="c4"
45244547
disabled={true}
45254548
onChange={[Function]}
4549+
onFocus={[Function]}
45264550
onKeyDown={[Function]}
45274551
onKeyUp={[Function]}
45284552
readOnly={true}
@@ -4595,6 +4619,7 @@ exports[`TextInput TimeInput 1`] = `
45954619
className="c4"
45964620
disabled={false}
45974621
onChange={[Function]}
4622+
onFocus={[Function]}
45984623
onKeyDown={[Function]}
45994624
onKeyUp={[Function]}
46004625
spellCheck={false}
@@ -4638,6 +4663,7 @@ exports[`TextInput TimeInput 1`] = `
46384663
className="c4"
46394664
disabled={false}
46404665
onChange={[Function]}
4666+
onFocus={[Function]}
46414667
onKeyDown={[Function]}
46424668
onKeyUp={[Function]}
46434669
spellCheck={false}
@@ -4664,6 +4690,7 @@ exports[`TextInput TimeInput 1`] = `
46644690
className="c4"
46654691
disabled={false}
46664692
onChange={[Function]}
4693+
onFocus={[Function]}
46674694
onKeyDown={[Function]}
46684695
onKeyUp={[Function]}
46694696
spellCheck={false}
@@ -4704,6 +4731,7 @@ exports[`TextInput TimeInput 1`] = `
47044731
className="c4"
47054732
disabled={false}
47064733
onChange={[Function]}
4734+
onFocus={[Function]}
47074735
onKeyDown={[Function]}
47084736
onKeyUp={[Function]}
47094737
spellCheck={false}
@@ -4752,6 +4780,7 @@ exports[`TextInput TimeInput 1`] = `
47524780
className="c4"
47534781
disabled={false}
47544782
onChange={[Function]}
4783+
onFocus={[Function]}
47554784
onKeyDown={[Function]}
47564785
onKeyUp={[Function]}
47574786
spellCheck={false}

0 commit comments

Comments
 (0)