playbook_ui 15.1.0.pre.alpha.PLAY2468phonenuminputvalidation10993 → 15.1.0.pre.alpha.alphaforaudiences151011000

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f282ba3da61911cdfdc409d4cf8272cd1a89f0110a381e78c7af5faf80da9faf
-  data.tar.gz: 5c04ca68a269de660b5fae7f0ef9886e8b8d3545d065f6f91cdf45deba513c83
+  metadata.gz: 6ada0b8869b8f7e86b4f9fec2216ae14a2525539440e67b22af9856df81c5261
+  data.tar.gz: 3bdbee334dc6ed0c7d937ccb4fe9855e9987cab7b5747e47fe51fb760a573b0c
 SHA512:
-  metadata.gz: 3869b47c55c537d86d46e33849016d975bcb8184d7f8c2529b68a556087c349a7e6438bfdb07e5c1e8ecd8e99daae22251919181714d8520b3df7e91cff67c48
-  data.tar.gz: 55243c0bbbafd08287ac9cb8524bfca5a76730222e3d459be8c9cfaf8afdf752eae4ed5ab787ce94c3d5b82d28e6caee59028b71dc5feb88b9f73df247ee8d08
+  metadata.gz: 87f028d5f2cba6bcf56e2ea6054e48a67179ca1192e45710b19096607102981a442aa5ed5e653d5e70b25d180cda4b4c7d008d3a1a1956983d8cd5dd13a2ca03
+  data.tar.gz: 58335f67e22a6055a4b631f211b99f6801f68ea9cb2f9bc13ba6dc7145caa067a626d4f57e03e8981b2420f81e8964e93f09ca9ebbe9c84a46579e6f892bd8f7

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -146,8 +146,6 @@ export function useTableState({
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
-    if (!pagination) return {};
-
     return {
       getPaginationRowModel: getPaginationRowModel(),
       paginateExpandedRows: false,

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -19,6 +19,10 @@
     @import "./sass_partials/calendar_input_icon";
   }
 
+  label {
+    display: block !important;
+  }
+
   &:focus,
   :focus-within {
     div.cal_icon_wrapper,

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb

@@ -3,12 +3,12 @@
 <%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-stacked-delete"}, margin_right: "md" }) %>
 
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-stacked-default", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-stacked-default",
     status: "default",
-    size: "sm", 
-    title: "Are you sure?", 
-    text: "Text explaining why there is an alert", 
+    size: "sm",
+    title: "Are you sure?",
+    text: "Text explaining why there is an alert",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
@@ -18,12 +18,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-stacked-caution", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-stacked-caution",
     status: "caution",
-    size: "sm", 
-    title: "Are you sure?", 
-    text: "This is the action you will be taking", 
+    size: "sm",
+    title: "Are you sure?",
+    text: "This is the action you will be taking",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
@@ -33,16 +33,16 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-stacked-delete", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-stacked-delete",
     status: "delete",
-    size: "sm", 
-    title: "Delete", 
-    text: "You are about to delete ...", 
+    size: "sm",
+    title: "Delete",
+    text: "You are about to delete ...",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
-            <%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
+            <%= pb_rails("button", props: { text: "Yes, Action", variant: "danger", full_width: true }) %>
             <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-delete" } }) %>
         <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx

@@ -51,7 +51,7 @@ const DialogStackedAlert = () => {
   return (
     <div>
     <Flex
-        rowGap="xs" 
+        rowGap="xs"
         wrap
     >
       <Button
@@ -93,6 +93,7 @@ const DialogStackedAlert = () => {
           <Button
               fullWidth
               onClick={dialog.toggle}
+              variant= {dialog.status == "delete" ? "danger" : "primary"}
           >
             {dialog.buttonOneText}
           </Button>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb

@@ -8,12 +8,12 @@
 <%= pb_rails("button", props: { text: "Success Status", data: {"open-dialog": "dialog-status-success"}, margin_right: "md" }) %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-default", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-default",
     status: "default",
-    size: "status_size", 
-    title: "Are you sure?", 
-    text: "Text explaining why there is an alert", 
+    size: "status_size",
+    title: "Are you sure?",
+    text: "Text explaining why there is an alert",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -23,12 +23,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-info", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-info",
     status: "info",
-    size: "status_size", 
-    title: "Information", 
-    text: "Text explaining why there is an alert", 
+    size: "status_size",
+    title: "Information",
+    text: "Text explaining why there is an alert",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -37,12 +37,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-caution", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-caution",
     status: "caution",
-    size: "status_size", 
-    title: "Are you Sure?", 
-    text: "This is the action you will be taking", 
+    size: "status_size",
+    title: "Are you Sure?",
+    text: "This is the action you will be taking",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -52,27 +52,27 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-delete", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-delete",
     status: "delete",
-    size: "status_size", 
-    title: "Delete", 
-    text: "You are about to delete ...", 
+    size: "status_size",
+    title: "Delete",
+    text: "You are about to delete ...",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
-            <%= pb_rails("button", props: { text: "Yes, Delete" }) %>
+            <%= pb_rails("button", props: { text: "Yes, Delete", variant: "danger" }) %>
             <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-delete" } }) %>
         <% end %>
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-error", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-error",
     status: "error",
-    size: "status_size", 
-    title: "Error Message", 
-    text: "Text explaining the error", 
+    size: "status_size",
+    title: "Error Message",
+    text: "Text explaining the error",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -81,12 +81,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-success", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-success",
     status: "success",
-    size: "status_size", 
-    title: "Success!", 
-    text: "Text explaining what is successful", 
+    size: "status_size",
+    title: "Success!",
+    text: "Text explaining what is successful",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx

@@ -83,8 +83,8 @@ const DialogStatus = () => {
 
   return (
     <div>
-      <Flex 
-          rowGap="xs" 
+      <Flex
+          rowGap="xs"
           wrap
       >
         <Button
@@ -117,7 +117,7 @@ const DialogStatus = () => {
         >
           {"Success Status"}
         </Button>
-        <Button 
+        <Button
             marginRight="md"
             onClick={toggleErrorAlert}
         >
@@ -152,6 +152,7 @@ const DialogStatus = () => {
                   <Button
                       onClick={dialog.toggle}
                       paddingRight="xl"
+                      variant={dialog.status == "delete" ? "danger" : "primary"}
                   >
                   {dialog.buttonOneText}
                   </Button>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -90,7 +90,7 @@
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true, required: true } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -2,13 +2,12 @@ import PbEnhancedElement from '../pb_enhanced_element'
 import { debounce } from '../utilities/object'
 
 // Kit selectors
-const KIT_SELECTOR                           = '[class^="pb_"][class*="_kit"]'
-const ERROR_MESSAGE_SELECTOR                 = '.pb_body_kit_negative'
+const KIT_SELECTOR             = '[class^="pb_"][class*="_kit"]'
+const ERROR_MESSAGE_SELECTOR   = '.pb_body_kit_negative'
 
 // Validation selectors
-const FORM_SELECTOR                          = 'form[data-pb-form-validation="true"]'
-const REQUIRED_FIELDS_SELECTOR               = 'input[required],textarea[required],select[required]'
-const PHONE_NUMBER_VALIDATION_ERROR_SELECTOR = '[data-pb-phone-validation-error="true"]'
+const FORM_SELECTOR            = 'form[data-pb-form-validation="true"]'
+const REQUIRED_FIELDS_SELECTOR = 'input[required],textarea[required],select[required]'
 
 const FIELD_EVENTS = [
   'change',
@@ -23,24 +22,12 @@ class PbFormValidation extends PbEnhancedElement {
 
   connect() {
     this.formValidationFields.forEach((field) => {
-      // Skip phone number inputs - they handle their own validation
-      const isPhoneNumberInput = field.closest('.pb_phone_number_input')
-      if (isPhoneNumberInput) return
-
       FIELD_EVENTS.forEach((e) => {
         field.addEventListener(e, debounce((event) => {
           this.validateFormField(event)
         }, 250), false)
       })
     })
-
-    // Add event listener to check for phone number validation errors
-    this.element.addEventListener('submit', (event) => {
-      if (this.hasPhoneNumberValidationErrors()) {
-        event.preventDefault()
-        return false
-      }
-    })
   }
 
   validateFormField(event) {
@@ -58,25 +45,20 @@ class PbFormValidation extends PbEnhancedElement {
 
   showValidationMessage(target) {
     const { parentElement } = target
-    const kitElement = parentElement.closest(KIT_SELECTOR)
-
-    // Check if this is a phone number input
-    const isPhoneNumberInput = kitElement && kitElement.classList.contains('pb_phone_number_input')
 
     // ensure clean error message state
     this.clearError(target)
-    kitElement.classList.add('error')
+    parentElement.closest(KIT_SELECTOR).classList.add('error')
 
-    // Only add error message if it's NOT a phone number input
-    if (!isPhoneNumberInput) {
-      // set the error message element
-      const errorMessageContainer = this.errorMessageContainer
-      if (target.dataset.message) target.setCustomValidity(target.dataset.message)
-      errorMessageContainer.innerHTML = target.validationMessage
+    // set the error message element
+    const errorMessageContainer = this.errorMessageContainer
 
-      // add the error message element to the dom tree
-      parentElement.appendChild(errorMessageContainer)
-    }
+    if (target.dataset.message) target.setCustomValidity(target.dataset.message)
+
+    errorMessageContainer.innerHTML = target.validationMessage
+
+    // add the error message element to the dom tree
+    parentElement.appendChild(errorMessageContainer)
   }
 
   clearError(target) {
@@ -86,12 +68,6 @@ class PbFormValidation extends PbEnhancedElement {
     if (errorMessageContainer) errorMessageContainer.remove()
   }
 
-  // Check if there are phone number input errors
-  hasPhoneNumberValidationErrors() {
-    const phoneNumberErrors = this.element.querySelectorAll(PHONE_NUMBER_VALIDATION_ERROR_SELECTOR)
-    return phoneNumberErrors.length > 0
-  }
-
   get errorMessageContainer() {
     const errorContainer = document.createElement('div')
     const kitClassName = ERROR_MESSAGE_SELECTOR.replace(/\./, '')

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

@@ -110,43 +110,38 @@ 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)
-  const [error, setError] = useState("")
+  const [error, setError] = useState(props.error)
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
   const [hasTyped, setHasTyped] = useState(false)
-  const [formSubmitted, setFormSubmitted] = useState(false)
-
-  // Function to update validation state on the wrapper element
-  // Only applies when input is required
-  const updateValidationState = (hasError: boolean) => {
-    if (wrapperRef.current && required) {
-      if (hasError) {
-        wrapperRef.current.setAttribute('data-pb-phone-validation-error', 'true')
-      } else {
-        wrapperRef.current.removeAttribute('data-pb-phone-validation-error')
-      }
-    }
-  }
-
-  // Determine which error to display
-  // Show internal errors on blur (hasTyped) or on form submission (formSubmitted)
-  const shouldShowInternalError = (hasTyped || formSubmitted) && required && error
-  const displayError = props.error || (shouldShowInternalError ? error : "")
 
   useEffect(() => {
-    const hasError = error.length > 0
-    if (hasError) {
+    if ((error ?? '').length > 0) {
       onValidate(false)
     } else {
       onValidate(true)
     }
-
-    // Update validation state whenever error changes
-    updateValidationState(hasError)
   }, [error, onValidate])
 
+  /*
+    useImperativeHandle exposes the kit's input element to a parent component via a ref.
+    See the Playbook docs for use cases.
+    Read: https://react.dev/reference/react/useImperativeHandle
+  */
+  useImperativeHandle(ref, () => {
+    return {
+      clearField() {
+        setInputValue("")
+        setError("")
+        setHasTyped(false)
+      },
+      inputNode() {
+        return inputRef.current
+      }
+    }
+  })
+
   const unformatNumber = (formattedNumber: any) => {
     return formattedNumber.replace(/\D/g, "")
   }
@@ -169,13 +164,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const validateTooShortNumber = (itiInit: any) => {
     if (!itiInit) return
-
-    // If field is empty, don't show "too short" error
-    if (!inputValue || inputValue.trim() === '') {
-      setError('')
-      return false
-    }
-
     if (itiInit.getValidationError() === ValidationError.TooShort) {
       return showFormattedError('too short')
     } else {
@@ -218,33 +206,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const validateRepeatCountryCode = (itiInit: any) => {
     if (!itiInit) return
-    const countryDialCode = itiRef.current.getSelectedCountryData().dialCode;
+    const countryDialCode = itiInit.getSelectedCountryData().dialCode;
     if (unformatNumber(inputValue).startsWith(countryDialCode)) {
       return showFormattedError('repeat country code')
     }
   }
 
-  // Validation for required empty fields
-  const validateRequiredField = () => {
-    if (required && (!inputValue || inputValue.trim() === '')) {
-      setError('Missing phone number')
-      return true
-    }
-    return false
-  }
 
   const validateErrors = () => {
-    // If field is empty, only show required field error if applicable
-    if (!inputValue || inputValue.trim() === '') {
-      if (validateRequiredField()) return
-      // Clear any existing errors if field is empty and not required
-      if (!required) {
-        setError('')
-      }
-      return
-    }
+    if (!hasTyped && !error) return
 
-    // Run validation checks
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
     if (validateOnlyNumbers(itiRef.current)) return
     if (validateTooLongNumber(itiRef.current)) return
@@ -254,121 +225,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     if (validateRepeatCountryCode(itiRef.current)) return
   }
 
-  // Add listener for form validation to track when validation should be shown
-  useEffect(() => {
-    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) {
-          setFormSubmitted(true)
-          // Trigger validation when form is submitted
-          validateErrors()
-        }
-      }
-    }
-
-    document.addEventListener('invalid', handleInvalid, true)
-
-    return () => {
-      document.removeEventListener('invalid', handleInvalid, true)
-    }
-  }, [name, inputValue])
-
-  /*
-    useImperativeHandle exposes the kit's input element to a parent component via a ref.
-    See the Playbook docs for use cases.
-    Read: https://react.dev/reference/react/useImperativeHandle
-  */
-  useImperativeHandle(ref, () => {
-    return {
-      clearField() {
-        setInputValue("")
-        setError("")
-        setHasTyped(false)
-        setFormSubmitted(false)
-        // Only clear validation state if field was required
-        if (required) {
-          updateValidationState(false)
-        }
-      },
-      inputNode() {
-        return inputRef.current
-      },
-      // Expose validation method for React Hook Form
-      validate() {
-        // Run validation and return error message or true
-        const isEmpty = !inputValue || inputValue.trim() === ''
-
-        if (required && isEmpty) {
-          setError('Missing phone number')
-          setFormSubmitted(true)
-          return 'Missing phone number'
-        }
-
-        if (isEmpty) {
-          setError('')
-          return true
-        }
-
-        if (!itiRef.current) {
-          return true
-        }
-
-        // Check for repeat country code first
-        const countryDialCode = itiRef.current.getSelectedCountryData().dialCode;
-        if (unformatNumber(inputValue).startsWith(countryDialCode)) {
-          const countryName = itiRef.current.getSelectedCountryData().name
-          const errorMessage = `Invalid ${countryName} phone number (repeat country code)`
-          setError(errorMessage)
-          setFormSubmitted(true)
-          setHasTyped(true)
-          return errorMessage
-        }
-
-        // Check if it only contains valid characters
-        if (!containOnlyNumbers(inputValue)) {
-          const countryName = itiRef.current.getSelectedCountryData().name
-          const errorMessage = `Invalid ${countryName} phone number (enter numbers only)`
-          setError(errorMessage)
-          setFormSubmitted(true)
-          setHasTyped(true)
-          return errorMessage
-        }
-
-        // Check if valid number
-        if (!itiRef.current.isValidNumber()) {
-          const countryName = itiRef.current.getSelectedCountryData().name
-          const validationError = itiRef.current.getValidationError()
-          let errorMessage = ''
-
-          if (validationError === ValidationError.TooShort) {
-            errorMessage = `Invalid ${countryName} phone number (too short)`
-          } else if (validationError === ValidationError.TooLong) {
-            errorMessage = `Invalid ${countryName} phone number (too long)`
-          } else if (validationError === ValidationError.MissingAreaCode) {
-            errorMessage = `Invalid ${countryName} phone number (missing area code)`
-          } else {
-            errorMessage = `Invalid ${countryName} phone number`
-          }
-
-          // Set the error state so the validation attribute gets added
-          setError(errorMessage)
-          setFormSubmitted(true)
-          setHasTyped(true)
-
-          return errorMessage
-        }
-
-        // Clear error if valid
-        setError('')
-        return true
-      }
-    }
-  })
-
   const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
     return { ...itiInit.getSelectedCountryData(), number: inputValue }
   }
@@ -376,12 +232,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     if (!hasTyped) setHasTyped(true)
     setInputValue(evt.target.value)
-
-    // Reset form submitted state when user types
-    if (formSubmitted) {
-      setFormSubmitted(false)
-    }
-
     let phoneNumberData
     if (formatAsYouType) {
       const formattedPhoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
@@ -390,28 +240,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       phoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
     }
     setSelectedData(phoneNumberData)
-
-    // Check if this is React Hook Form by checking if onChange expects target format
-    const isReactHookForm = onChange.toString().includes("target")
-    if (isReactHookForm) {
-      // For React Hook Form, pass the event with modified target value
-      onChange({
-        ...evt,
-        target: {
-          ...evt.target,
-          name,
-          value: phoneNumberData
-        }
-      } as any)
-    } else {
-      onChange(phoneNumberData)
-    }
-
+    onChange(phoneNumberData)
     isValid(itiRef.current.isValidNumber())
-
-    // Trigger validation after onChange for React Hook Form
-    // This ensures validation state is up-to-date
-    setTimeout(() => validateErrors(), 0)
   }
 
   // Separating Concerns as React Docs Recommend
@@ -470,7 +300,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     dark,
     "data-phone-number": JSON.stringify(selectedData),
     disabled,
-    error: displayError,
+    error,
     type: 'tel',
     id,
     label,
@@ -480,10 +310,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     value: inputValue
   }
 
-  let wrapperProps: Record<string, unknown> = {
-    className: classes,
-    ref: wrapperRef
-  }
+  let wrapperProps: Record<string, unknown> = { className: classes }
 
   if (!isEmpty(aria)) textInputProps = {...textInputProps, ...ariaProps}
   if (!isEmpty(data)) wrapperProps = {...wrapperProps, ...dataProps}