playbook_ui 15.5.0.pre.alpha.PLAY2581aggressivevalidation12650 → 15.5.0.pre.alpha.PLAY2581aggressivevalidation12651

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e03ff921e93222ee43918cb8f7587728ec77eecf9d7bf901103e955fa387d9d3
-  data.tar.gz: 124557cd8f737ad7999cf59787eb9183e52f3ebcd4853bad2241b7e4d1982aa0
+  metadata.gz: 7a11fd5c7d50218344f06ff233740c4b4fbd7821f77ae252ae36cb6b0a72891b
+  data.tar.gz: 34b091afe5eeb712931507289e02ea6f9fbc0476d6700340a3ce7f22d97a86ca
 SHA512:
-  metadata.gz: 2a97fa52358423064cf1c1564ea623fc2087debacc08bf9e282c59ea274b41c8725f9ea37b3dc414d35227bf7d17dc621e2850def822925047564deb6181edf0
-  data.tar.gz: '0195e845746b7ab77e555c006a506a951ca7347ce65668b12d67401387363c1031b641f156cda4ba2332bfd11b9b46d3dfbe772d3d42c01f58f3930650870f88'
+  metadata.gz: 98b2841f9f591ad23e05c8fc418e518672c6820abd5d338e4d7144f4b3900c91005ff00f1c7829a6e474428a5fe83224a5a3b6ef1c7bd527aad2cf9fddf8d95a
+  data.tar.gz: bee8426f2ca6a22dbd355427ec5d5f34fee41ce12752a0ecf78d14663f1be35b68fce6e0316ef4b2340632e011203302daac490c56a1eb177e92fdf3354893f9

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
@@ -493,12 +512,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()
     },