@tellescope/react-components 1.185.1 → 1.186.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.185.1",
+  "version": "1.186.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.1",
-    "@tellescope/sdk": "^1.185.1",
-    "@tellescope/types-client": "^1.185.1",
-    "@tellescope/types-models": "^1.185.1",
-    "@tellescope/types-utilities": "^1.185.1",
-    "@tellescope/utilities": "^1.185.1",
-    "@tellescope/validation": "^1.185.1",
+    "@tellescope/constants": "^1.186.0",
+    "@tellescope/sdk": "^1.186.0",
+    "@tellescope/types-client": "^1.186.0",
+    "@tellescope/types-models": "^1.186.0",
+    "@tellescope/types-utilities": "^1.186.0",
+    "@tellescope/utilities": "^1.186.0",
+    "@tellescope/validation": "^1.186.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": "76ab045b222f3d87a67ed3d71ceb56044545a6d3",
+  "gitHead": "7cb921210c5f676cf20d4e460b895a92cca57ac5",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -531,7 +531,7 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
       if (activeField.value.type === 'stringLong') return // 
       if (activeField.value.type === 'Question Group') return // ensure enter is allowed in stringLong at end of a question group before next
       if (isNextDisabled()) return
-      goToNextField()
+      goToNextField(undefined)
     } 
   }, [activeField, isNextDisabled, goToNextField, isPreviousDisabled, goToPreviousField])
 
@@ -617,7 +617,7 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
               />
             )
             : (
-              <Button variant="contained" disabled={isNextDisabled()} onClick={goToNextField} 
+              <Button variant="contained" disabled={isNextDisabled()} onClick={() => goToNextField(undefined)} 
                 style={{ ...defaultButtonStyles, width: 100 }}
               >
                 {form_display_text_for_language(form, "Next")}

package/src/Forms/hooks.tsx

@@ -1301,7 +1301,8 @@ export const useTellescopeForm = ({ isPublicForm, form, urlLogicValue, customiza
   }, [activeField, validateField, uploadingFiles])
 
   const autoAdvanceRef = useRef(false)
-  const goToNextField = useCallback((answer?: FormResponseValue['answer']) => {
+  // don't make option, to avoid user passing invalid data, like an onclick event
+  const goToNextField = useCallback((answer: FormResponseValue['answer'] | undefined) => {
     if (!currentValue) return
     if (isNextDisabled() && currentValue?.answer.type !== 'Hidden Value') return
 

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()