playbook_ui 18.2.0.pre.alpha.PLAY3330requiredtypeaheadvalidationbug20501 → 18.2.0.pre.alpha.PLAY3330requiredtypeaheadvalidationbug20513

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7dbf0a3b9ab274f14a2649da9a731e7ecd620059ecd14bfb6ca48f5348a5e9aa
-  data.tar.gz: c4bfe24249c642c27e8b8872ffefbd39732536f1ef268511f9a48aa9f465d384
+  metadata.gz: f9a07c8fc62bc1d10aa56006d9eeeb75205676445028b7bd80aef17e361c8973
+  data.tar.gz: 0314b68de5cd6b14230b1879806806078a120fec39ed60489c1523b489347b93
 SHA512:
-  metadata.gz: 9c5ec95ec8876bec1bb49e151e24c3f0d39c3c5e5b9c6a764809432f1648b1ddfbb93a3339becb7f30164ea9776fb914baf05e6f45d70d9741cbf27ab0bd1183
-  data.tar.gz: 50e2c8cf11b1222b06142994a0f7d83970b2e746331bd6fd478d6f402caecc0ea13f1fc8f60fa1ef62d2246bd56a3581e399076248667a995f1cdc29b9fb3c5b
+  metadata.gz: 3b122cf616f2f43a735c51aafb13ca40fe5ad44e639dae5289abb33c0de7a7afbf679338889ee2ef3c397551c41bfacc5801b610709138ae4dd7c148df7830e9
+  data.tar.gz: ce7c196c03bfca844e78e3651e1be09804b7373890a69cfeceb671592b75bed78c3d976b3e5978e8ff81459d23c3d6a010faf88044ae4e0119b12550ea30202c

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -630,3 +630,129 @@ test(':set calls onChange but does not dispatch result-option-select', async ()
     selectHandler,
   )
 })
+
+test('required Typeahead in validated form shows its own error and stays mounted after selection', async () => {
+  render(
+    <form data-pb-form-validation="true">
+      <Typeahead
+          data={{ testid: 'required-validated-typeahead' }}
+          isMulti={false}
+          name="favorite_color"
+          options={options}
+          required
+          validation={{ message: 'Please select a color' }}
+      />
+    </form>
+  )
+
+  const kit = screen.getByTestId('required-validated-typeahead')
+  const requiredInput = kit.querySelector('input[required]')
+  expect(requiredInput).toBeInTheDocument()
+
+  act(() => {
+    requiredInput.dispatchEvent(new Event('invalid', { bubbles: false, cancelable: true }))
+  })
+
+  await waitFor(() => {
+    expect(kit.querySelector('.pb_body_kit_negative')).toHaveTextContent('Please select a color')
+  })
+
+  // PbFormValidation must not own this input — no injected sibling error on the
+  // react-select RequiredInput parent (that path caused removeChild crashes).
+  const injectedSibling = Array.from(requiredInput.parentElement.children).find(
+    (child) => child.classList?.contains('pb_body_kit_negative')
+  )
+  expect(injectedSibling).toBeUndefined()
+
+  const control = kit.querySelector('.typeahead-kit-select__control')
+  fireEvent.mouseDown(control)
+
+  await waitFor(() => {
+    expect(document.querySelector('.typeahead-kit-select__option')).toBeInTheDocument()
+  })
+
+  fireEvent.click(screen.getByText('Orange'))
+
+  await waitFor(() => {
+    expect(screen.getByTestId('required-validated-typeahead')).toBeInTheDocument()
+    expect(
+      screen.getByTestId('required-validated-typeahead').querySelector('.pb_body_kit_negative')
+    ).not.toBeInTheDocument()
+  })
+})
+
+test('required Typeahead restores validation error after clear and resubmit', async () => {
+  render(
+    <form data-pb-form-validation="true">
+      <Typeahead
+          data={{ testid: 'required-clear-resubmit-typeahead' }}
+          defaultValue={options[0]}
+          isMulti={false}
+          name="favorite_color"
+          options={options}
+          required
+          validation={{ message: 'Please select a color' }}
+      />
+    </form>
+  )
+
+  const kit = screen.getByTestId('required-clear-resubmit-typeahead')
+  const clearIndicator = kit.querySelector('.typeahead-kit-select__clear-indicator')
+  expect(clearIndicator).toBeInTheDocument()
+  fireEvent.mouseDown(clearIndicator)
+
+  await waitFor(() => {
+    expect(kit.querySelector('input[required]')).toBeInTheDocument()
+  })
+
+  const requiredInput = kit.querySelector('input[required]')
+  act(() => {
+    requiredInput.dispatchEvent(new Event('invalid', { bubbles: false, cancelable: true }))
+  })
+
+  await waitFor(() => {
+    expect(kit.querySelector('.pb_body_kit_negative')).toHaveTextContent('Please select a color')
+  })
+})
+
+test('required Typeahead suppresses native invalid UI only inside validated Playbook forms', () => {
+  const { unmount } = render(
+    <form data-pb-form-validation="true">
+      <Typeahead
+          data={{ testid: 'native-invalid-validated' }}
+          isMulti={false}
+          name="color"
+          options={options}
+          required
+      />
+    </form>
+  )
+
+  let requiredInput = screen.getByTestId('native-invalid-validated').querySelector('input[required]')
+  const validatedEvent = new Event('invalid', { bubbles: false, cancelable: true })
+  act(() => {
+    requiredInput.dispatchEvent(validatedEvent)
+  })
+  expect(validatedEvent.defaultPrevented).toBe(true)
+
+  unmount()
+
+  render(
+    <form>
+      <Typeahead
+          data={{ testid: 'native-invalid-unvalidated' }}
+          isMulti={false}
+          name="color"
+          options={options}
+          required
+      />
+    </form>
+  )
+
+  requiredInput = screen.getByTestId('native-invalid-unvalidated').querySelector('input[required]')
+  const unvalidatedEvent = new Event('invalid', { bubbles: false, cancelable: true })
+  act(() => {
+    requiredInput.dispatchEvent(unvalidatedEvent)
+  })
+  expect(unvalidatedEvent.defaultPrevented).toBe(false)
+})

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -541,20 +541,25 @@ const resolvedLoadOptions =
 
     const [contextValue, setContextValue] = useState("")
 
-    // Add listener for form validation to track when validation should be shown (needed for react rendered rails kit)
+    // Track form submit validation for react-rendered Typeahead (own error UI).
+    // When inside pb_form_with validate: true, suppress the browser's native
+    // invalid UI — PbFormValidation skips this kit so it must not double-show.
     useEffect(() => {
       const handleInvalid = (event: Event) => {
         const target = event.target as HTMLInputElement
-        const typeaheadContainer = target.closest(
-          '[data-pb-react-component="Typeahead"]',
-        )
+        if (!kitContainerRef.current?.contains(target)) return
 
-        if (typeaheadContainer) {
-          // Check if this invalid event is specifically for our typeahead by comparing names so we do not have to require ids
-          const invalidInputName = target.name || target.getAttribute("name")
-          if (invalidInputName === name) {
-            setFormSubmitted(true)
-          }
+        // Match by name so we do not have to require ids
+        const invalidInputName = target.name || target.getAttribute("name")
+        if (invalidInputName !== name) return
+
+        setFormSubmitted(true)
+
+        const validatedForm = target.closest(
+          'form[data-pb-form-validation="true"]',
+        )
+        if (validatedForm) {
+          event.preventDefault()
         }
       }
       document.addEventListener("invalid", handleInvalid, true)

data/dist/ai/forms.json

@@ -1,6 +1,6 @@
 {
   "metadataVersion": 1,
-  "version": "18.2.0-alpha.PLAY3330requiredtypeaheadvalidationbug20501",
+  "version": "18.2.0-alpha.PLAY3330requiredtypeaheadvalidationbug20513",
   "builder": {
     "class": "Playbook::Forms::Builder",
     "helper": "pb_form_with",

data/dist/ai/index.json

@@ -1,8 +1,8 @@
 {
-  "version": "18.2.0-alpha.PLAY3330requiredtypeaheadvalidationbug20501",
+  "version": "18.2.0-alpha.PLAY3330requiredtypeaheadvalidationbug20513",
   "metadataVersion": 1,
   "forms": "forms.json",
-  "generated": "2026-10-26T17:28:46.243Z",
+  "generated": "2026-10-26T18:47:24.653Z",
   "schemas": {
     "globalProps": "global-props.schema.json",
     "globalEventProps": "global-event-props.schema.json",