fix scroll for InputField

Author: nicoecheza

packages/@dcl/inspector/src/components/ui/TextField/TextField.tsx

@@ -8,6 +8,16 @@ import { Props } from './types'
 
 import './TextField.css'
 
+function buildBlurEvent(event: React.MouseEvent<HTMLInputElement>) {
+  return {
+    ...event,
+    type: 'blur',
+    target: event.target,
+    currentTarget: event.currentTarget,
+    relatedTarget: null
+  } as unknown as React.FocusEvent<HTMLInputElement>
+}
+
 const TextField = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
   const {
     drop,
@@ -43,6 +53,7 @@ const TextField = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
 
   const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(
     (event) => {
+      console.log('asd 1', event)
       setInputValue(event.target.value)
       debounceChange(event)
     },
@@ -74,6 +85,20 @@ const TextField = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
     setHovered(false)
   }, [setHovered])
 
+  const handleWheel: React.WheelEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      if (type === 'number') {
+        event.preventDefault()
+        event.stopPropagation()
+        const input = event.currentTarget
+        input.blur()
+        onBlur?.(buildBlurEvent(event))
+        return false
+      }
+    },
+    [type, onBlur]
+  )
+
   const renderLeftContent = useCallback(() => {
     if (leftLabel) {
       return (
@@ -130,6 +155,7 @@ const TextField = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
           onBlur={handleInputBlur}
           onMouseEnter={handleMouseEnter}
           onMouseLeave={handleMouseLeave}
+          onWheel={handleWheel}
           disabled={disabled}
           {...rest}
         />