diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_NumberField_With_Change_On_Scroll_Disabled.png b/packages/ui/.loki/reference/chrome_minimal_Components_NumberField_With_Change_On_Scroll_Disabled.png
new file mode 100644
index 000000000..b3fba97df
Binary files /dev/null and b/packages/ui/.loki/reference/chrome_minimal_Components_NumberField_With_Change_On_Scroll_Disabled.png differ
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Fullscreen.png b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Fullscreen.png
index 5166174a3..51424e3ea 100644
Binary files a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Fullscreen.png and b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Fullscreen.png differ
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Close_Text.png b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Close_Text.png
index 940c2d02b..f280049da 100644
Binary files a/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Close_Text.png and b/packages/ui/.loki/reference/chrome_minimal_Components_Overlay_Without_Close_Text.png differ
diff --git a/packages/ui/__stories__/NumberField.stories.tsx b/packages/ui/__stories__/NumberField.stories.tsx
index c756f7b9a..739f0e82f 100644
--- 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
index 83caabc6f..b57915f26 100644
--- 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"