playbook_ui 15.5.0.pre.alpha.PLAY2581aggressivevalidation12652 → 15.5.0.pre.alpha.PLAY2581aggressivevalidation12653

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b033c3a47f35de6f8b7ffc146e271bb47b1deacd8907d26ce7a2b0d53f5cbb21
-  data.tar.gz: 20e3e4fc5b7c06a0dca8af5bc6fec8896d4747ca44a6bb54fa20a19231414ba6
+  metadata.gz: bd8b63915fa51f6daabd0a877e7bd6c0dbe337c900389228dd9434f5deeaa535
+  data.tar.gz: 1ba2091df0504ec326221fd2660e9238e7220673385b159e0c207ad82fb28e35
 SHA512:
-  metadata.gz: 0a6b71fd848f702853c207858e87c9871452ddc33c47302f3b2f088b89e3a60a43a444c4b38a063dee98417471972969e46ca6be3b0bad682f414c8e32d282bd
-  data.tar.gz: 36223f09387c0edc8f0e101568abae69bb1554525e3cf0e616d7cd3086ddcf4bce8994f6bc118fc6b64ad7e11bd02162a438fa03daa6f6ea023913b007d18446
+  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)
@@ -295,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()
@@ -327,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
@@ -345,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'
         }
@@ -401,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)
 
@@ -424,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
@@ -439,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
   }
@@ -497,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())
+          }
         })
       }
     }
@@ -519,6 +556,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     label,
     name,
     onBlur: () => {
+      hasBlurredRef.current = true
       setHasBlurred(true)
       validateErrors()
     },