playbook_ui 15.5.0.pre.alpha.PLAY2581aggressivevalidation12650 → 15.5.0.pre.alpha.PLAY2581aggressivevalidation12652

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e03ff921e93222ee43918cb8f7587728ec77eecf9d7bf901103e955fa387d9d3
-  data.tar.gz: 124557cd8f737ad7999cf59787eb9183e52f3ebcd4853bad2241b7e4d1982aa0
+  metadata.gz: b033c3a47f35de6f8b7ffc146e271bb47b1deacd8907d26ce7a2b0d53f5cbb21
+  data.tar.gz: 20e3e4fc5b7c06a0dca8af5bc6fec8896d4747ca44a6bb54fa20a19231414ba6
 SHA512:
-  metadata.gz: 2a97fa52358423064cf1c1564ea623fc2087debacc08bf9e282c59ea274b41c8725f9ea37b3dc414d35227bf7d17dc621e2850def822925047564deb6181edf0
-  data.tar.gz: '0195e845746b7ab77e555c006a506a951ca7347ce65668b12d67401387363c1031b641f156cda4ba2332bfd11b9b46d3dfbe772d3d42c01f58f3930650870f88'
+  metadata.gz: 0a6b71fd848f702853c207858e87c9871452ddc33c47302f3b2f088b89e3a60a43a444c4b38a063dee98417471972969e46ca6be3b0bad682f414c8e32d282bd
+  data.tar.gz: 36223f09387c0edc8f0e101568abae69bb1554525e3cf0e616d7cd3086ddcf4bce8994f6bc118fc6b64ad7e11bd02162a438fa03daa6f6ea023913b007d18446

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

@@ -110,7 +110,13 @@ 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 [inputValue, setInputValue] = useState(value)
+  // 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 [error, setError] = useState(props.error || "")
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
@@ -119,6 +125,15 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   const [formSubmitted, setFormSubmitted] = useState(false)
   const [hasStartedValidating, setHasStartedValidating] = useState(false)
 
+  // Sync value prop when it changes (e.g., from react-hook-form)
+  useEffect(() => {
+    const newValue = getValueString(props.value)
+    if (newValue !== inputValue) {
+      setInputValue(newValue)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.value])
+
   // Only sync initial error from props, not continuous updates
   // Once validation starts, internal validation takes over
   useEffect(() => {
@@ -147,6 +162,10 @@ 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
@@ -261,7 +280,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())
@@ -493,12 +513,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     dark,
     "data-phone-number": JSON.stringify(selectedData),
     disabled,
-    error: hasTyped ? error : props.error || displayError,
+    error: displayError || propError,
     type: 'tel',
     id,
     label,
     name,
-    onBlur: (e: React.FocusEvent<HTMLInputElement>) => {
+    onBlur: () => {
       setHasBlurred(true)
       validateErrors()
     },