@tellescope/react-components 1.185.2 → 1.187.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.185.2",
+  "version": "1.187.0",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -47,13 +47,13 @@
     "@reduxjs/toolkit": "^1.6.2",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^1.52.1",
-    "@tellescope/constants": "^1.185.2",
-    "@tellescope/sdk": "^1.185.2",
-    "@tellescope/types-client": "^1.185.2",
-    "@tellescope/types-models": "^1.185.2",
-    "@tellescope/types-utilities": "^1.185.2",
-    "@tellescope/utilities": "^1.185.2",
-    "@tellescope/validation": "^1.185.2",
+    "@tellescope/constants": "^1.187.0",
+    "@tellescope/sdk": "^1.187.0",
+    "@tellescope/types-client": "^1.187.0",
+    "@tellescope/types-models": "^1.187.0",
+    "@tellescope/types-utilities": "^1.187.0",
+    "@tellescope/utilities": "^1.187.0",
+    "@tellescope/validation": "^1.187.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -84,7 +84,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "f295e385c155897b5252d36d6c1cede51c8ae30f",
+  "gitHead": "fbb905922b74dd70b690751a272ede269ef9fcb1",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/inputs.tsx

@@ -485,26 +485,49 @@ export const EmailInput = ({ field, value, onChange, form, ...props }: FormInput
   />
 )
 
-export const NumberInput = ({ field, value, onChange, form, ...props }: FormInputProps<'number'>) => (
-  <AutoFocusTextField {...props} required={!field.isOptional} fullWidth type="number" value={value} 
-    onChange={e => onChange(parseInt(e.target.value), field.id)}  
-    label={(!field.title && field.placeholder) ? field.placeholder : props.label}
-    placeholder={field.placeholder || form_display_text_for_language(form, "Enter a number...", '')}
-    sx={{
-      '& input[type=number]': {
-        '-moz-appearance': 'textfield'
-      },
-      '& input[type=number]::-webkit-outer-spin-button': {
-          '-webkit-appearance': 'none',
-          margin: 0
-      },
-      '& input[type=number]::-webkit-inner-spin-button': {
-          '-webkit-appearance': 'none',
-          margin: 0
-      }
-    }}
-  />
-)
+export const NumberInput = ({ field, value, onChange, form, ...props }: FormInputProps<'number'>) => {
+  // Prevent the default scroll behavior when focused on this input
+  const inputRef = useRef<HTMLInputElement>(null); 
+  useEffect(() => {
+    const handleWheel = (e: any) => {
+      e?.preventDefault?.();
+    };
+    
+    // Get the actual input element inside the TextField
+    const inputElement = inputRef.current?.querySelector('input');
+    
+    if (inputElement) {
+      inputElement.addEventListener('wheel', handleWheel, { passive: false });
+      
+      // Clean up event listener when component unmounts
+      return () => {
+        inputElement.removeEventListener('wheel', handleWheel);
+      };
+    }
+  }, []);
+
+  return (
+    <TextField ref={inputRef} autoFocus InputProps={defaultInputProps} {...props} required={!field.isOptional} fullWidth type="number" value={value} 
+      onChange={e => onChange(parseInt(e.target.value), field.id)}  
+      label={(!field.title && field.placeholder) ? field.placeholder : props.label}
+      placeholder={field.placeholder || form_display_text_for_language(form, "Enter a number...", '')}
+      onScroll={e => e.preventDefault()} // prevent scroll on number input
+      sx={{
+        '& input[type=number]': {
+          '-moz-appearance': 'textfield'
+        },
+        '& input[type=number]::-webkit-outer-spin-button': {
+            '-webkit-appearance': 'none',
+            margin: 0
+        },
+        '& input[type=number]::-webkit-inner-spin-button': {
+            '-webkit-appearance': 'none',
+            margin: 0
+        }
+      }}
+    />
+  )
+}
 
 export const InsuranceInput = ({ field, value, onChange, form, responses, enduser, ...props }: FormInputProps<'Insurance'>) => {
   const session = useResolvedSession()