playbook_ui 15.3.0.pre.alpha.PLAY2624stickyColumnnullerror12217 → 15.3.0.pre.alpha.PLAY2630fctearlyautoClose12133

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ea7b38915f027f1c001f3d8a0b3a049f48a3a05fac9356694683cd6be63e4baf
-  data.tar.gz: 0f9a8fa985742d492bfcc05f9c856528fd8add374d8bad8fe7dfde396b7e4885
+  metadata.gz: 7192248df5f0637ad12e46b7b132649b32b33307a6ff4f8dccad0ca9f63f6a7a
+  data.tar.gz: 827cf7efed9c7bfd05213a2836fb6260a249a9044e93cd5a788fe9e519588400
 SHA512:
-  metadata.gz: 57c322955a95e0ac7fafa6a910a7ffee4d306ea589bc3b44a67d9dc0d4180ec0c0eca2fffb9e84b829245498f3bbb28c0e4ad13b2002345f544c9db5b09ce234
-  data.tar.gz: 6cef80f787aa55523c90ef4eb42241fa354cd7bd085c89d365dbf3a4bbe3d6dac6738e39484fd68a918537e072cf7a0a52657e7e258bc9713b5fb5b1da4c6721
+  metadata.gz: d892a19d229008fd10343d7e37058830db0a06ed7082487781c4499b16906d631c77e451b18bd5d43ec5fd92b4dca7cf0bd7f4872ada3fe6c1155d918d6e428c
+  data.tar.gz: 1de75fec52872b94288ded06092f1fe94004e9de66ae74b82879524eb80d2e3256ac476e1120743c730770d5080130a7530ff25dab2ccb4e151a1de9adc5a344

data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts

@@ -17,7 +17,7 @@ export const getRowColorClass = (
     (inlineRowLoading && (rowHasNoChildren || row.getCanExpand()))
   );
 
-  return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "pb-bg-row-white";
+  return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "bg-white";
 }
 
 /**

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -51,7 +51,7 @@
     background-color: lighten($silver, $opacity_7);
   }
 
-  .pb-bg-row-white {
+  .bg-white {
     background-color: $white;
   }
 
@@ -278,7 +278,7 @@
         }
       }
 
-      &.pb-bg-row-white {
+      &.bg-white {
         td:first-child {
           background-color: $white;
         }
@@ -756,7 +756,7 @@
       border-bottom-color: $border_dark !important;
     }
 
-    .pb-bg-row-white {
+    .bg-white {
       background: $bg_dark_card;
     }
 
@@ -766,7 +766,7 @@
 
     // Dark mode virtualized rows
     .virtualized-table-row {
-      &.pb-bg-row-white {
+      &.bg-white {
         background: $bg_dark_card !important;
 
         td:first-child {

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -308,10 +308,10 @@ test("Row toggle button exists and toggles subrows open and closed", () => {
   const kit = screen.getByTestId(testId)
   const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
   expect(rowButton).toBeInTheDocument()
-  const subRow1 = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
+  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1")
   expect(subRow1).not.toBeInTheDocument()
   rowButton.click()
-  const subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
+  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
   expect(subRow).toBeInTheDocument()
 })
 
@@ -328,13 +328,13 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", asy
   const toggleButton = kit.querySelector(".gray-icon.toggle-all-icon");
   expect(toggleButton).toBeInTheDocument();
 
-  const subRow1 = kit.querySelector(".pb-bg-row-white.depth-sub-row-1");
+  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1");
   expect(subRow1).not.toBeInTheDocument();
 
   toggleButton.click();
 
   await waitFor(() => {
-    const subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1");
+    const subRow = kit.querySelector(".bg-white.depth-sub-row-1");
     expect(subRow).toBeInTheDocument();
   })
 })
@@ -385,7 +385,7 @@ test("expandControl prop works as expected", () => {
   render (<AdvancedTableExpandControl/>)
 
   const kit = screen.getByTestId(testId)
-  const subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
+  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
   expect(subRow).toBeInTheDocument()
 })
 

data/app/pb_kits/playbook/pb_advanced_table/flat_advanced_table.js

@@ -51,7 +51,7 @@ export default class PbFlatAdvancedTable extends PbEnhancedElement {
 
         const tr = rowCb.closest("tr");
         tr?.classList.toggle("bg-row-selection", rowCb.checked);
-        tr?.classList.toggle("pb-bg-row-white", !rowCb.checked);
+        tr?.classList.toggle("bg-white", !rowCb.checked);
       }
 
       if (allCb) {
@@ -62,7 +62,7 @@ export default class PbFlatAdvancedTable extends PbEnhancedElement {
           cb.checked = checked;
           const tr = cb.closest("tr");
           tr?.classList.toggle("bg-row-selection", checked);
-          tr?.classList.toggle("pb-bg-row-white", !checked);
+          tr?.classList.toggle("bg-white", !checked);
           const id = cb.id;
           if (checked) this.selectedRows.add(id);
           else this.selectedRows.delete(id);

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -76,7 +76,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         // Only apply styling if the checkbox is inside a table row
         if (rowEl) {
           rowEl.classList.add("bg-row-selection");
-          rowEl.classList.remove("pb-bg-row-white", "bg-silver");
+          rowEl.classList.remove("bg-white", "bg-silver");
         }
       } else {
         // Only apply styling if the checkbox is inside a table row
@@ -85,9 +85,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
           
           if (this.isRowExpanded(rowEl)) {
             rowEl.classList.remove("bg-silver");
-            rowEl.classList.add("pb-bg-row-white");
+            rowEl.classList.add("bg-white");
           } else {
-            rowEl.classList.remove("pb-bg-row-white");
+            rowEl.classList.remove("bg-white");
             rowEl.classList.add("bg-silver");
           }
         }
@@ -120,7 +120,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     if (isChecked) {
       PbAdvancedTable.selectedRows.add(rowId);
       rowEl.classList.add("bg-row-selection");
-      rowEl.classList.remove("pb-bg-row-white", "bg-silver");
+      rowEl.classList.remove("bg-white", "bg-silver");
     } else {
       PbAdvancedTable.selectedRows.delete(rowId);
     }
@@ -130,9 +130,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
       if (this.isRowExpanded(rowEl)) {
         rowEl.classList.remove("bg-silver");
-        rowEl.classList.add("pb-bg-row-white");
+        rowEl.classList.add("bg-white");
       } else {
-        rowEl.classList.remove("pb-bg-row-white");
+        rowEl.classList.remove("bg-white");
         rowEl.classList.add("bg-silver");
       }
     }
@@ -407,7 +407,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     const row = this.element.closest("tr");
     if (row) {
       row.classList.toggle("bg-silver", !isVisible);
-      row.classList.toggle("pb-bg-row-white", isVisible);
+      row.classList.toggle("bg-white", isVisible);
     }
 
     this.addBorderRadiusOnLastVisibleRow();

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -52,7 +52,7 @@
     }
   }
 
-  .pb-bg-row-white {
+  .bg-white {
     td:first-child,
     .sticky-left {
       background-color: $bg-main;
@@ -63,7 +63,7 @@
     &.bg-silver td:first-child {
       background-color: $bg-secondary;
     }
-    &.pb-bg-row-white td:first-child {
+    &.bg-white td:first-child {
       background-color: $bg-main;
     }
     &.bg-row-selection td:first-child {

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -39,7 +39,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_table_tr", "pb-bg-row-white", subrow_depth_classname, separator: " ")
+        generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
       end
 
       def td_classname(column, index)

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import classnames from "classnames";
 
 import { globalProps, GlobalProps } from "../utilities/globalProps";
@@ -36,6 +36,7 @@ type FixedConfirmationToastProps = {
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
   const [showToast, toggleToast] = useState(true);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const {
     autoClose = 0,
@@ -67,21 +68,42 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
 
   const htmlProps = buildHtmlProps(htmlOptions);
 
-  const autoCloseToast = () => {
-    if (autoClose && open) {
-      setTimeout(() => {
+  useEffect(() => {
+    toggleToast(open);
+  }, [open]);
+
+  // Manage auto-close timeout separately
+  useEffect(() => {
+    // Clear any existing timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    // Set new timeout if autoClose is enabled and toast is open
+    if (autoClose && open && showToast) {
+      timeoutRef.current = setTimeout(() => {
         toggleToast(false);
         onClose();
+        timeoutRef.current = null;
       }, autoClose);
     }
-  };
 
-  useEffect(() => {
-    toggleToast(open);
-    autoCloseToast();
-  }, [open]);
+    // Cleanup function to clear timeout on unmount or when dependencies change
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, [autoClose, open, showToast, onClose]);
 
   const handleClick = () => {
+    // Clear autoClose timeout when manually closing
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
     toggleToast(!closeable);
     onClose();
   };

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

@@ -8,13 +8,13 @@ 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 FIELD_EVENTS = [
   'change',
   'valid',
   'invalid',
 ]
+
 class PbFormValidation extends PbEnhancedElement {
   static get selector() {
     return FORM_SELECTOR
@@ -22,27 +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) => {
-      // Use setTimeout to ensure React state updates have completed
-      setTimeout(() => {
-        if (this.hasPhoneNumberValidationErrors()) {
-          event.preventDefault()
-          return false
-        }
-      }, 0)
-    })
   }
 
   validateFormField(event) {
@@ -60,58 +45,40 @@ class PbFormValidation extends PbEnhancedElement {
 
   showValidationMessage(target) {
     const { parentElement } = target
-    const kitElement = parentElement.closest(KIT_SELECTOR)
-
-    // FIX: Add null check for kitElement
-    if (!kitElement) return
-
-    // Check if this is a phone number input
-    const isPhoneNumberInput = 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
+    // set the error message element
+    const errorMessageContainer = this.errorMessageContainer
 
-      if (target.dataset.message) target.setCustomValidity(target.dataset.message)
+    if (target.dataset.message) target.setCustomValidity(target.dataset.message)
 
-      errorMessageContainer.innerHTML = target.validationMessage
+    errorMessageContainer.innerHTML = target.validationMessage
 
-      // add the error message element to the dom tree
-      parentElement.appendChild(errorMessageContainer)
-    }
+    // add the error message element to the dom tree
+    parentElement.appendChild(errorMessageContainer)
   }
 
   clearError(target) {
     const { parentElement } = target
-    const kitElement = parentElement.closest(KIT_SELECTOR)
-    // Remove error class from kit element
-    if (kitElement) kitElement.classList.remove('error')
-    // Remove error message from parent element
+    parentElement.closest(KIT_SELECTOR).classList.remove('error')
     const errorMessageContainer = parentElement.querySelector(ERROR_MESSAGE_SELECTOR)
     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(/\./, '')
     errorContainer.classList.add(kitClassName)
     return errorContainer
   }
+
   get formValidationFields() {
     return this._formValidationFields =
       this._formValidationFields || this.element.querySelectorAll(REQUIRED_FIELDS_SELECTOR)
   }
 }
 
-window.PbFormValidation = PbFormValidation
+window.PbFormValidation = PbFormValidation

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

@@ -55,6 +55,7 @@ const formatToGlobalCountryName = (countryName: string) => {
 
 const formatAllCountries = () => {
   const countryData = intlTelInput.getCountryData()
+
   for (let i = 0; i < countryData.length; i++) {
     const country = countryData[i]
     country.name = formatToGlobalCountryName(country.name)
@@ -109,54 +110,18 @@ 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(props.error || "")
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
   const [hasTyped, setHasTyped] = useState(false)
-  const [formSubmitted, setFormSubmitted] = useState(false)
-  const [hasStartedValidating, setHasStartedValidating] = useState(false)
-
-  // Only sync initial error from props, not continuous updates
-  // Once validation starts, internal validation takes over
-  useEffect(() => {
-    if (props.error && !hasStartedValidating) {
-      setError(props.error)
-      // If there's an initial error from props, mark as submitted so it shows
-      if (props.error) {
-        setFormSubmitted(true)
-      }
-    }
-  }, [props.error, hasStartedValidating])
-
-  // 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 = 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])
 
   const unformatNumber = (formattedNumber: any) => {
@@ -172,7 +137,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const validateTooLongNumber = (itiInit: any) => {
     if (!itiInit) return
-
     if (itiInit.getValidationError() === ValidationError.TooLong) {
       return showFormattedError('too long')
     } else {
@@ -182,11 +146,13 @@ 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 {
@@ -206,7 +172,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const validateUnhandledError = (itiInit: any) => {
-    if (!required || !itiInit) return
+    if (!itiInit) return
     if (itiInit.getValidationError() === ValidationError.SomethingWentWrong) {
       if (inputValue.length === 1) {
         return showFormattedError('too short')
@@ -218,6 +184,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       }
     }
   }
+
   const validateMissingAreaCode = (itiInit: any) => {
     if (!itiInit) return
     if (itiInit.getValidationError() === ValidationError.MissingAreaCode) {
@@ -234,9 +201,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     }
   }
 
-  // Validation for required empty fields
   const validateRequiredField = () => {
-    if (required && (!inputValue || inputValue.trim() === '')) {
+    if (!inputValue || inputValue.trim() === '') {
       setError('Missing phone number')
       return true
     }
@@ -244,24 +210,14 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const validateErrors = () => {
-    // Signal validation has started, so prop errors won't override internal validation
-    if (!hasStartedValidating) {
-      setHasStartedValidating(true)
-    }
-
-    // If field is empty, only show required field error if applicable
+    // If field is empty, show error message
     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
+    if (!hasTyped && !error) return
 
-    // Run validation checks
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
     if (validateOnlyNumbers(itiRef.current)) return
     if (validateTooLongNumber(itiRef.current)) return
@@ -271,29 +227,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.
@@ -305,12 +238,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         setInputValue("")
         setError("")
         setHasTyped(false)
-        setFormSubmitted(false)
-        setHasStartedValidating(false)
-        // Only clear validation state if field was required
-        if (required) {
-          updateValidationState(false)
-        }
       },
       inputNode() {
         return inputRef.current
@@ -320,12 +247,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         // 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) {
           // Show missing phone number error
           const errorMessage = 'Missing phone number'
@@ -345,7 +266,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
           const countryName = itiRef.current.getSelectedCountryData().name
           const errorMessage = `Invalid ${countryName} phone number (repeat country code)`
           setError(errorMessage)
-          setFormSubmitted(true)
           setHasTyped(true)
           return errorMessage
         }
@@ -355,7 +275,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
           const countryName = itiRef.current.getSelectedCountryData().name
           const errorMessage = `Invalid ${countryName} phone number (enter numbers only)`
           setError(errorMessage)
-          setFormSubmitted(true)
           setHasTyped(true)
           return errorMessage
         }
@@ -376,9 +295,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
             errorMessage = `Invalid ${countryName} phone number`
           }
 
-          // Set the error state so the validation attribute gets added
           setError(errorMessage)
-          setFormSubmitted(true)
           setHasTyped(true)
 
           return errorMessage
@@ -397,16 +314,11 @@ 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)
-    }
+    setInputValue(evt.target.value)
 
     let phoneNumberData
 
-    // Handle formatAsYouType with input event
     if (formatAsYouType) {
       const formattedPhoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
       phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
@@ -417,15 +329,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     setSelectedData(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
   // This also Fixes things for our react_component rendering on the Rails Side
   useEffect(formatAllCountries, [])
+
   // If an initial country is not specified, the "globe" icon will show
   // Always set a country
   const fallbackCountry =
@@ -466,9 +375,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
       inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
 
-    // Handle formatAsYouType with input event
-    if (formatAsYouType) {
-      inputRef.current.addEventListener("input", (evt: Event) => {
+      // Handle formatAsYouType with input event
+      if (formatAsYouType) {
+        inputRef.current.addEventListener("input", (evt: Event) => {
           const target = evt.target as HTMLInputElement
           const formattedValue = target.value
 
@@ -487,12 +396,13 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       }
     }
   }, [])
+
   let textInputProps: {[key: string]: any} = {
     className: dropDownIsOpen ? 'dropdown_open' : '',
     dark,
     "data-phone-number": JSON.stringify(selectedData),
     disabled,
-    error: hasTyped ? error : props.error || displayError,
+    error: hasTyped ? error : props.error,
     type: 'tel',
     id,
     label,
@@ -502,10 +412,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}