Prevent NumberField change on wheel [MC-2926] (#561)

More context here: https://hazelcast.atlassian.net/browse/MC-2573?focusedCommentId=100053 (bullet point 9) After changes: https://github.com/hazelcast/hive/assets/75899391/b2e0909c-bee6-44d9-bd8b-5848ca4a29c5
hazelcast · Jul 12, 2024 · 4daa657 · 4daa657
1 parent 9351c2e
commit 4daa657
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 1 deletion.
diff --git a/...erence/chrome_minimal_Components_NumberField_With_Change_On_Scroll_Disabled.png b/...erence/chrome_minimal_Components_NumberField_With_Change_On_Scroll_Disabled.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Fullscreen.png b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Fullscreen.png
diff --git a/...ges/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Close_Text.png b/...ges/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Close_Text.png
diff --git a/packages/ui/__stories__/NumberField.stories.tsx b/packages/ui/__stories__/NumberField.stories.tsx
@@ -97,6 +97,11 @@ WithMinAndMax.args = {
   max: 44,
 }
 
+export const WithChangeOnScrollDisabled = Template.bind({})
+WithChangeOnScrollDisabled.args = {
+  disableChangeOnScroll: true,
+}
+
 export const WithHelperText = Template.bind({})
 WithHelperText.args = {
   helperText: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',

diff --git a/packages/ui/src/NumberField.tsx b/packages/ui/src/NumberField.tsx
@@ -1,5 +1,5 @@
 import { DataTestProp } from '@hazelcast/helpers'
-import React, { FC, FocusEvent, ChangeEvent, InputHTMLAttributes, useCallback, useMemo } from 'react'
+import React, { FC, FocusEvent, ChangeEvent, InputHTMLAttributes, useCallback, useMemo, useRef, useEffect } from 'react'
 import { PlusCircle, MinusCircle } from 'react-feather'
 import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect'
 import cn from 'classnames'
@@ -23,6 +23,7 @@ export type NumberFieldExtraProps = Omit<TextFieldProps<'number'>, 'onChange' |
   step?: number
   min?: number
   max?: number
+  disableChangeOnScroll?: boolean
   defaultValue?: number
   numberType?: 'int' | 'float'
   iconPosition?: 'separate' | 'together'
@@ -46,6 +47,7 @@ export const NumberField: FC<NumberFieldProps> = ({
   step = 1,
   min,
   max,
+  disableChangeOnScroll,
   value,
   numberType = 'int',
   iconPosition = 'together',
@@ -57,6 +59,25 @@ export const NumberField: FC<NumberFieldProps> = ({
   size,
   ...props
 }) => {
+  const field = useRef<HTMLInputElement>(null)
+
+  const handleWheel = useCallback((e: WheelEvent) => {
+    const target = e.target as HTMLInputElement
+    target.blur()
+  }, [])
+
+  useEffect(() => {
+    if (disableChangeOnScroll) {
+      const current = field.current
+      if (current) {
+        current.addEventListener('wheel', handleWheel)
+        return () => {
+          current.removeEventListener('wheel', handleWheel)
+        }
+      }
+    }
+  }, [disableChangeOnScroll, handleWheel])
+
   useIsomorphicLayoutEffect(() => {
     if (min !== undefined && value !== undefined && value < min) {
       onChange(min)
@@ -205,6 +226,7 @@ export const NumberField: FC<NumberFieldProps> = ({
   return (
     <TextField
       {...props}
+      {...(disableChangeOnScroll ? { mRef: field } : {})}
       value={value}
       onChange={onChangeWrapped}
       type="number"