playbook_ui 15.5.0.pre.alpha.PLAY2581aggressivevalidation12652 → 15.5.0.pre.alpha.PLAY2581aggressivevalidation12654

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b033c3a47f35de6f8b7ffc146e271bb47b1deacd8907d26ce7a2b0d53f5cbb21
-  data.tar.gz: 20e3e4fc5b7c06a0dca8af5bc6fec8896d4747ca44a6bb54fa20a19231414ba6
+  metadata.gz: 8d7304b03db9bc4ab776ed9ce2604fe575e567e1422f9d5723bd21d5c70c7055
+  data.tar.gz: 13a59f20b961605878db38e672e12506f237cc84fc551f25362c6903cde1eb03
 SHA512:
-  metadata.gz: 0a6b71fd848f702853c207858e87c9871452ddc33c47302f3b2f088b89e3a60a43a444c4b38a063dee98417471972969e46ca6be3b0bad682f414c8e32d282bd
-  data.tar.gz: 36223f09387c0edc8f0e101568abae69bb1554525e3cf0e616d7cd3086ddcf4bce8994f6bc118fc6b64ad7e11bd02162a438fa03daa6f6ea023913b007d18446
+  metadata.gz: 4598269558bc2d5ba6477f6960b79cf9ba382cccf3d3aff365593dd191eb02848f0c04ac01b5e387f5a002378cf60d009e764e94dafb49247457c8daa3576de0
+  data.tar.gz: 9b79bf1cd0d95cafee125db473de79c58063ef9520172531f6be7e91eba01248d6e0a41cfb49449ebcd2ed20f576764e20931704c86df2bb017d0a7e7d6c8884

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -110,13 +110,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   const inputRef = useRef<HTMLInputElement | null>(null)
   const itiRef = useRef<any>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
-  // Handle value prop - it might be a string or an object with number property (from react-hook-form)
-  const getValueString = (val: any): string => {
-    if (typeof val === 'string') return val
-    if (val?.number) return val.number
-    return ""
-  }
-  const [inputValue, setInputValue] = useState(getValueString(value))
+  const hasBlurredRef = useRef<boolean>(false);
+  const formSubmittedRef = useRef<boolean>(false);
+  const [inputValue, setInputValue] = useState(value)
   const [error, setError] = useState(props.error || "")
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
@@ -124,15 +120,15 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   const [hasBlurred, setHasBlurred] = useState(false)
   const [formSubmitted, setFormSubmitted] = useState(false)
   const [hasStartedValidating, setHasStartedValidating] = useState(false)
-
-  // Sync value prop when it changes (e.g., from react-hook-form)
+  
+  // Keep refs in sync with state for use in event listeners
   useEffect(() => {
-    const newValue = getValueString(props.value)
-    if (newValue !== inputValue) {
-      setInputValue(newValue)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.value])
+    hasBlurredRef.current = hasBlurred
+  }, [hasBlurred])
+  
+  useEffect(() => {
+    formSubmittedRef.current = formSubmitted
+  }, [formSubmitted])
 
   // Only sync initial error from props, not continuous updates
   // Once validation starts, internal validation takes over
@@ -162,10 +158,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   // Show internal errors only after blur (hasBlurred) or on form submission (formSubmitted)
   const shouldShowInternalError = (hasBlurred || formSubmitted) && error
   const displayError = shouldShowInternalError ? error : ""
-  
-  // Only show error prop after blur (to prevent showing react-hook-form errors while typing)
-  const shouldShowPropError = hasBlurred || formSubmitted
-  const propError = shouldShowPropError ? (props.error || "") : ""
 
   useEffect(() => {
     const hasError = (error ?? '').length > 0
@@ -280,7 +272,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     }
 
      // Only validate if field has been blurred or form has been submitted
-     // Don't validate on change - only on blur or submission
      if (!hasBlurred && !formSubmitted) return
 
     // Run validation checks
@@ -302,6 +293,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       if (phoneNumberContainer && phoneNumberContainer === wrapperRef.current) {
         const invalidInputName = target.name || target.getAttribute('name')
         if (invalidInputName === name) {
+          formSubmittedRef.current = true
           setFormSubmitted(true)
           // Trigger validation when form is submitted
           validateErrors()
@@ -327,7 +319,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         setInputValue("")
         setError("")
         setHasTyped(false)
+        hasBlurredRef.current = false
         setHasBlurred(false)
+        formSubmittedRef.current = false
         setFormSubmitted(false)
         setHasStartedValidating(false)
         // Only clear validation state if field was required
@@ -345,6 +339,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
         if (required && isEmpty) {
           setError('Missing phone number')
+          formSubmittedRef.current = true
           setFormSubmitted(true)
           return 'Missing phone number'
         }
@@ -401,6 +396,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
           // Set the error state so the validation attribute gets added
           setError(errorMessage)
+          formSubmittedRef.current = true
           setFormSubmitted(true)
           setHasTyped(true)
 
@@ -424,6 +420,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
     // Reset form submitted state when user types
     if (formSubmitted) {
+      formSubmittedRef.current = false
       setFormSubmitted(false)
     }
 
@@ -439,7 +436,13 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
-    isValid(itiRef.current.isValidNumber())
+    
+    // Don't call isValid callback on change - only on blur or form submission
+    // This prevents triggering validation while typing
+    // Use refs to get current values in case this is called from event listener
+    if (hasBlurredRef.current || formSubmittedRef.current) {
+      isValid(itiRef.current.isValidNumber())
+    }
 
     // Don't validate on change - only validate on blur or form submission
   }
@@ -503,7 +506,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
           setSelectedData(phoneNumberData)
           onChange(phoneNumberData)
-          isValid(telInputInit.isValidNumber())
+          
+          // Don't call isValid callback on change - only on blur or form submission
+          // Use refs to check current blur state in the event listener (closure issue)
+          if (hasBlurredRef.current || formSubmittedRef.current) {
+            isValid(telInputInit.isValidNumber())
+          }
         })
       }
     }
@@ -513,12 +521,13 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     dark,
     "data-phone-number": JSON.stringify(selectedData),
     disabled,
-    error: displayError || propError,
+    error: displayError || props.error || "",
     type: 'tel',
     id,
     label,
     name,
     onBlur: () => {
+      hasBlurredRef.current = true
       setHasBlurred(true)
       validateErrors()
     },