playbook_ui 15.3.0.pre.alpha.PLAY2596datestackedcurrentyear12149 → 15.3.0.pre.alpha.PLAY2601advancedtablecustomcellmultiheaderrails12030

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React from "react"
 import { render, screen, fireEvent } from "../utilities/test-utils"
 
 import { Dropdown, Icon, IconCircle } from 'playbook-ui'
@@ -393,150 +393,4 @@ test("applies activeStyle backgroundColor and fontColor when selected", () => {
     expect(selected).toBeInTheDocument()
     expect(selected).toHaveClass("bg-bg_light")
     expect(selected).toHaveClass("font-primary")
-  })
-
-test("renders quickpick variant with auto-generated options", () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('pb_dropdown_quickpick')
-  
-  // Check that quickpick options are generated
-  const options = kit.querySelectorAll('.pb_dropdown_option_list')
-  expect(options.length).toBe(10)
-  expect(options[0]).toHaveTextContent("Today")
-})
-
-test("quickpick variant accepts string defaultValue", () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        defaultValue="This Month"
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const trigger = kit.querySelector('.pb_dropdown_trigger')
-  
-  expect(trigger).toHaveTextContent("This Month")
-})
-
-test("quickpick attaches _dropdownRef to DOM element when id is provided", () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        id="test-quickpick"
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  
-  // Check that the element has the _dropdownRef attached
-  expect(kit._dropdownRef).toBeDefined()
-  expect(kit._dropdownRef.current).toBeDefined()
-  expect(kit._dropdownRef.current.clearSelected).toBeDefined()
-})
-
-test("quickpick clears selection when clicking X icon", () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        defaultValue="This Week"
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const trigger = kit.querySelector('.pb_dropdown_trigger')
-  
-  expect(trigger).toHaveTextContent("This Week")
-  
-  const clearIcon = kit.querySelector('[aria-label="times icon"]')
-  expect(clearIcon).toBeInTheDocument()
-  
-  fireEvent.click(clearIcon.parentElement)
-  
-  expect(trigger).toHaveTextContent("Select...")
-})
-
-test("quickpick returns date array values when option selected", () => {
-  const TestComponent = () => {
-    const [selected, setSelected] = useState(null)
-    return (
-      <>
-        <Dropdown
-            data={{ testid: testId }}
-            onSelect={(item) => setSelected(item)}
-            variant="quickpick"
-        />
-        {selected && (
-          <div data-testid="selected-value">
-            {JSON.stringify({
-              label: selected.label,
-              hasValue: !!selected.value,
-              isArray: Array.isArray(selected.value),
-              valueLength: selected.value?.length
-            })}
-          </div>
-        )}
-      </>
-    )
-  }
-
-  render(<TestComponent />)
-  
-  const kit = screen.getByTestId(testId)
-  const options = kit.querySelectorAll('.pb_dropdown_option_list')
-  
-  fireEvent.click(options[0])
-  
-  const selectedValue = screen.getByTestId('selected-value')
-  const data = JSON.parse(selectedValue.textContent)
-  
-  expect(data.label).toBe("Today")
-  expect(data.hasValue).toBe(true)
-  expect(data.isArray).toBe(true)
-  expect(data.valueLength).toBe(2)
-})
-
-test("quickpick option values are Date objects", () => {
-  const onSelectMock = jest.fn()
-  
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        onSelect={onSelectMock}
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const options = kit.querySelectorAll('.pb_dropdown_option_list')
-  
-  const thisMonthOption = Array.from(options).find(opt => opt.textContent === 'This Month')
-  fireEvent.click(thisMonthOption)
-  
-  const selectedItem = onSelectMock.mock.calls[0][0]
-  
-  expect(selectedItem.label).toBe("This Month")
-  expect(selectedItem.value).toBeDefined()
-  expect(Array.isArray(selectedItem.value)).toBe(true)
-  expect(selectedItem.value.length).toBe(2)
-  
-  const [startDate, endDate] = selectedItem.value
-  
-  expect(startDate instanceof Date).toBe(true)
-  expect(endDate instanceof Date).toBe(true)
-  
-  expect(startDate.getTime()).not.toBeNaN()
-  expect(endDate.getTime()).not.toBeNaN()
-  
-  expect(endDate.getTime()).toBeGreaterThanOrEqual(startDate.getTime())
-})
+  })

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

@@ -126,7 +126,7 @@ export default class PbDropdown extends PbEnhancedElement {
         .label.toString()
         .toLowerCase();
 
-    // hide or show option
+      // hide or show option
       const match = label.includes(lcTerm);
       opt.style.display = match ? "" : "none";
       if (match) hasMatch = true

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb

@@ -22,27 +22,13 @@
 }) %>
 
 <script>
-// Hide toasts immediately
-const hideAutoToasts = () => {
-  const toastAuto = document.getElementById('toast-auto-close');
-  const toastAutoCloseable = document.getElementById('toast-auto-close-closeable');
-  if (toastAuto) toastAuto.style.display = 'none';
-  if (toastAutoCloseable) toastAutoCloseable.style.display = 'none';
-}
-hideAutoToasts();
-
-// Handle various page load/restore events
-window.addEventListener('pageshow', hideAutoToasts)
-document.addEventListener('turbolinks:load', hideAutoToasts)
-document.addEventListener('turbo:load', hideAutoToasts)
-
 document.addEventListener('DOMContentLoaded', () => {
   // Initialize toast elements and buttons
   const toasts = {
     '#toast-auto-close': document.querySelector("#toast-auto-close"),
     '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
   }
-
+  
   const buttons = {
     '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
     '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb

@@ -24,6 +24,7 @@
   horizontal: "center"
 }) %>
 
+
 <script type="text/javascript">
   const multitoasts = document.querySelectorAll(".multitoast-to-hide")
   const multibuttons = document.querySelectorAll("button[data-multitoast]")
@@ -34,15 +35,6 @@
     })
   }
 
-  // Hide toasts immediately
-  hideMultiToasts()
-
-  // Handle various page load/restore events
-  window.addEventListener('pageshow', hideMultiToasts)
-  document.addEventListener('DOMContentLoaded', hideMultiToasts)
-  document.addEventListener('turbolinks:load', hideMultiToasts)
-  document.addEventListener('turbo:load', hideMultiToasts)
-
   multibuttons.forEach((button) => {
     button.onclick = () => {
       hideMultiToasts()
@@ -54,3 +46,10 @@
     }
   })
 </script>
+
+<!-- hiding toast on page load -->
+<style>
+  #toast-long, #toast-short {
+    display: none;
+  }
+</style>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb

@@ -69,28 +69,27 @@
   const toasts = document.querySelectorAll(".toast-to-hide")
   const buttons = document.querySelectorAll("button[data-toast]")
 
-  const hidePositionToasts = () => {
+  const hideToasts = () => {
     toasts.forEach((toast) => {
       toast.style.display = "none"
     })
   }
 
-  // Hide toasts immediately
-  hidePositionToasts()
-
-  // Handle various page load/restore events
-  window.addEventListener('pageshow', hidePositionToasts)
-  document.addEventListener('DOMContentLoaded', hidePositionToasts)
-  document.addEventListener('turbolinks:load', hidePositionToasts)
-  document.addEventListener('turbo:load', hidePositionToasts)
-
   buttons.forEach((button) => {
     button.onclick = () => {
-      hidePositionToasts()
+      hideToasts()
       let toast = document.querySelector(button.getAttribute("data-toast"))
+
       if (toast) {
         toast.style.display = "flex"
       }
     }
   })
 </script>
+
+<!-- hiding toast on page load -->
+<style>
+  #toast-top-center, #toast-top-right, #toast-top-left, #toast-bottom-center, #toast-bottom-right, #toast-bottom-left {
+    display: none;
+  }
+</style>

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_form_pill/_form_pill.tsx

@@ -9,7 +9,7 @@ import { buildDataProps, buildHtmlProps } from '../utilities/props'
 
 type FormPillProps = {
   className?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((event: any) => void) | any},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text: string,
   name?: string,

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}