playbook_ui 15.5.0.pre.alpha.PLAY2581aggressivevalidation12651 → 15.5.0.pre.alpha.PLAY2581aggressivevalidation12653

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7a11fd5c7d50218344f06ff233740c4b4fbd7821f77ae252ae36cb6b0a72891b
-  data.tar.gz: 34b091afe5eeb712931507289e02ea6f9fbc0476d6700340a3ce7f22d97a86ca
+  metadata.gz: bd8b63915fa51f6daabd0a877e7bd6c0dbe337c900389228dd9434f5deeaa535
+  data.tar.gz: 1ba2091df0504ec326221fd2660e9238e7220673385b159e0c207ad82fb28e35
 SHA512:
-  metadata.gz: 98b2841f9f591ad23e05c8fc418e518672c6820abd5d338e4d7144f4b3900c91005ff00f1c7829a6e474428a5fe83224a5a3b6ef1c7bd527aad2cf9fddf8d95a
-  data.tar.gz: bee8426f2ca6a22dbd355427ec5d5f34fee41ce12752a0ecf78d14663f1be35b68fce6e0316ef4b2340632e011203302daac490c56a1eb177e92fdf3354893f9
+  metadata.gz: 212923b88fdcc63bd98592cc373ff989b51f237d1d147b6fb5f083e15b521812e7a06d9f9ee54f2b1ccf16edf3160ee94e6b28f81a10caf5bcbcee59b731774d
+  data.tar.gz: 8ee030cb7e451dae0bedec3d130b94ae4607ce49037f95c4901ce02a755eb054829734682c1d46c067cca2955da6272baa46c741cc1124b4be94b2fddb64859f

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

@@ -110,6 +110,8 @@ 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);
+  const hasBlurredRef = useRef<boolean>(false);
+  const formSubmittedRef = useRef<boolean>(false);
   // 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
@@ -123,6 +125,15 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   const [hasTyped, setHasTyped] = useState(false)
   const [hasBlurred, setHasBlurred] = useState(false)
   const [formSubmitted, setFormSubmitted] = useState(false)
+  
+  // Keep refs in sync with state for use in event listeners
+  useEffect(() => {
+    hasBlurredRef.current = hasBlurred
+  }, [hasBlurred])
+  
+  useEffect(() => {
+    formSubmittedRef.current = formSubmitted
+  }, [formSubmitted])
   const [hasStartedValidating, setHasStartedValidating] = useState(false)
 
   // Sync value prop when it changes (e.g., from react-hook-form)
@@ -280,7 +291,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     }
 
      // Only validate if field has been blurred or form has been submitted
-     if (!hasBlurred && !formSubmitted && !error) return
+     // Don't validate on change - only on blur or submission
+     if (!hasBlurred && !formSubmitted) return
 
     // Run validation checks
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
@@ -294,13 +306,14 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   // Add listener for form validation to track when validation should be shown
   useEffect(() => {
-    const handleInvalid = (event: Event) => {
+      const handleInvalid = (event: Event) => {
       const target = event.target as HTMLInputElement
       const phoneNumberContainer = target.closest('.pb_phone_number_input')
 
       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()
@@ -326,7 +339,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
@@ -344,6 +359,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'
         }
@@ -400,6 +416,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)
 
@@ -423,9 +440,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
     // Reset form submitted state when user types
     if (formSubmitted) {
+      formSubmittedRef.current = false
       setFormSubmitted(false)
     }
 
+    // Clear error when user starts typing (before blur)
+    // This prevents showing validation errors while typing
+    if (!hasBlurredRef.current && error) {
+      setError('')
+    }
+
     let phoneNumberData
 
     // Handle formatAsYouType with input event
@@ -438,7 +462,12 @@ 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
+    if (hasBlurredRef.current || formSubmittedRef.current) {
+      isValid(itiRef.current.isValidNumber())
+    }
 
     // Don't validate on change - only validate on blur or form submission
   }
@@ -496,13 +525,22 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
           setInputValue(formattedValue)
           setHasTyped(true)
 
+          // Clear error when user types (before blur) - use ref to get current value
+          if (!hasBlurredRef.current) {
+            setError('')
+          }
+
           // Get phone number data with unformatted number
           const formattedPhoneNumberData = getCurrentSelectedData(telInputInit, formattedValue)
           const phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
 
           setSelectedData(phoneNumberData)
           onChange(phoneNumberData)
-          isValid(telInputInit.isValidNumber())
+          
+          // Don't call isValid callback on change - only on blur or form submission
+          if (hasBlurredRef.current || formSubmittedRef.current) {
+            isValid(telInputInit.isValidNumber())
+          }
         })
       }
     }
@@ -518,6 +556,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     label,
     name,
     onBlur: () => {
+      hasBlurredRef.current = true
       setHasBlurred(true)
       validateErrors()
     },