Add test for search

Author: sbaechler

cypress/e2e/useMultipleCombobox.cy.js

@@ -26,7 +26,7 @@ describe('useMultipleCombobox', () => {
 })
 
 describe('useMultipleCombobox in shadow DOM', () => {
-  before(() => {
+  beforeEach(() => {
     cy.visit('/shadow-dom/useMultipleCombobox')
   })
 
@@ -54,4 +54,25 @@ describe('useMultipleCombobox in shadow DOM', () => {
         cy.findByText('Gray').should('be.visible')
       })
   })
+
+  it('can filter the items', () => {
+    cy.get('[data-testid="shadow-root"]')
+      .shadow()
+      .within(() => {
+        cy.findByRole('button', {name: 'toggle menu'}).click()
+        cy.findAllByRole('option').should('have.length', 12)
+        cy.findByRole('combobox').type('g')
+        cy.findByRole('button', {name: 'toggle menu'}).should(
+          'have.attr',
+          'aria-expanded',
+          'true',
+        )
+        cy.findAllByRole('option').should('have.length', 2)
+        cy.findByText('Green').should('be.visible')
+        cy.findByText('Gray').should('be.visible')
+
+        cy.findByRole('combobox').type('{backspace}')
+        cy.findAllByRole('option').should('have.length', 12)
+      })
+  })
 })

docusaurus/pages/shadow-dom/useCombobox.js

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import DropdownCombobox from '../useCombobox'
+import {ReactShadowRoot} from '../../../test/react-shadow'
+
+const style = {
+  padding: '20px',
+}
+
+export default function MultipleComboboxShadow() {
+  return (
+    <div style={style}>
+      <h2>Shadow DOM</h2>
+      <div data-testid="shadow-root">
+        <ReactShadowRoot>
+          <DropdownCombobox />
+        </ReactShadowRoot>
+      </div>
+    </div>
+  )
+}

docusaurus/pages/shadow-dom/useMultipleCombobox.js

@@ -3,9 +3,13 @@ import * as React from 'react'
 import DropdownMultipleCombobox from '../useMultipleCombobox'
 import {ReactShadowRoot} from '../../../test/react-shadow'
 
+const style = {
+  padding: '20px',
+}
+
 export default function MultipleComboboxShadow() {
   return (
-    <div>
+    <div style={style}>
       <div>
         <button>Button before shadow root</button>
       </div>

src/__tests__/downshift.shadow-root.js

@@ -5,6 +5,7 @@ import Downshift from '../'
 import DropdownSelect from '../../test/useSelect.test'
 import DropdownCombobox, {colors} from '../../test/useCombobox.test'
 import DropdownMultipleSelect from '../../test/useMultipleSelect.test'
+import ComboBox from '../../test/downshift.test'
 import {ReactShadowRoot} from '../../test/react-shadow'
 
 function _queryAllByRoleDeep(container, ...rest) {
@@ -159,3 +160,123 @@ test('DropdownCombobox works correctly in shadow DOM', async () => {
   // Menu should close
   expect(input).toHaveAttribute('aria-expanded', 'false')
 })
+
+test('Downshift button blur correctly handles focus moving to external shadow DOM', async () => {
+  const user = userEvent.setup()
+  const {container} = render(<ComboBox />, {wrapper: Wrapper})
+
+  // Verify Downshift's own shadow root exists
+  expect(container.shadowRoot).toBeDefined()
+
+  const comboboxRoot = getByRoleDeep('combobox')
+  const toggleButton = container.shadowRoot.querySelector(
+    '[data-testid="combobox-toggle-button"]',
+  )
+
+  // Open the dropdown
+  await user.click(toggleButton)
+  expect(comboboxRoot).toHaveAttribute('aria-expanded', 'true')
+
+  // Click the element inside the external shadow DOM
+  // This should focus externalFocusableButton and blur toggleButton (or the root/input depending on what had focus)
+  const externalHost = document.createElement('div')
+  document.body.appendChild(externalHost)
+  const shadow = externalHost.attachShadow({mode: 'open'})
+  const externalFocusableButton = document.createElement('button')
+  shadow.appendChild(externalFocusableButton)
+  await user.click(externalFocusableButton)
+
+  // Assert that the menu closes due to blur
+  // Downshift's blur handlers use setTimeout, so wait for the next macrotask
+  await new Promise(resolve => setTimeout(resolve, 0))
+  expect(comboboxRoot).toHaveAttribute('aria-expanded', 'false')
+
+  // Cleanup
+  document.body.removeChild(externalHost)
+})
+
+test('Downshift input blur correctly handles focus moving to external shadow DOM', async () => {
+  const user = userEvent.setup()
+  const {container} = render(<ComboBox />, {wrapper: Wrapper})
+
+  // Verify Downshift's own shadow root exists
+  expect(container.shadowRoot).toBeDefined()
+
+  const comboboxRoot = getByRoleDeep('combobox')
+  const inputField = container.shadowRoot.querySelector(
+    '[data-testid="combobox-input"]',
+  )
+  const downshiftToggleButton = container.shadowRoot.querySelector(
+    '[data-testid="combobox-toggle-button"]',
+  )
+
+  // Create an external element with its own shadow DOM
+  const externalHost = document.createElement('div')
+  document.body.appendChild(externalHost)
+  const shadow = externalHost.attachShadow({mode: 'open'})
+  const externalFocusableButton = document.createElement('button')
+  shadow.appendChild(externalFocusableButton)
+
+  // Open the dropdown by clicking the toggle button
+  await user.click(downshiftToggleButton)
+  expect(comboboxRoot).toHaveAttribute('aria-expanded', 'true')
+
+  // Ensure the input itself is focused before it blurs
+  inputField.focus()
+  await user.type(inputField, 'b')
+  await user.keyboard('{Tab}')
+  // Click the element inside the external shadow DOM
+  // This should focus externalFocusableButton and blur the input
+  await user.click(externalFocusableButton)
+
+  // Assert that the menu closes due to blur
+  // Downshift's blur handlers use setTimeout, so wait for the next macrotask
+  await new Promise(resolve => setTimeout(resolve, 0))
+  expect(comboboxRoot).toHaveAttribute('aria-expanded', 'false')
+
+  // Cleanup
+  document.body.removeChild(externalHost)
+})
+
+test('useCombobox input blur correctly handles focus moving to external shadow DOM', async () => {
+  const user = userEvent.setup()
+  const {container} = render(<DropdownCombobox />, {wrapper: Wrapper})
+
+  // Verify DropdownCombobox's own shadow root exists via the Wrapper
+  expect(container.shadowRoot).toBeDefined()
+
+  const input = container.shadowRoot.querySelector(
+    '[data-testid="combobox-input"]',
+  )
+  const toggleButton = container.shadowRoot.querySelector(
+    '[data-testid="combobox-toggle-button"]',
+  )
+
+  // Create an external element with its own shadow DOM
+  const externalHost = document.createElement('div')
+  document.body.appendChild(externalHost)
+  const shadow = externalHost.attachShadow({mode: 'open'})
+  const externalFocusableButton = document.createElement('button')
+  shadow.appendChild(externalFocusableButton)
+
+  // Open the dropdown by clicking the toggle button
+  await user.click(toggleButton)
+  expect(input).toHaveAttribute('aria-expanded', 'true')
+
+  // Ensure the input itself is focused before it blurs
+  input.focus()
+  await user.type(input, 'b')
+  await user.keyboard('{Tab}')
+
+  // Click the element inside the external shadow DOM
+  // This should focus externalFocusableButton and blur the input in DropdownCombobox
+  await user.click(externalFocusableButton)
+
+  // Assert that the menu closes due to blur
+  // useCombobox's blur handler uses setTimeout, so wait for the next macrotask
+  await new Promise(resolve => setTimeout(resolve, 0))
+  expect(input).toHaveAttribute('aria-expanded', 'false')
+
+  // Cleanup
+  document.body.removeChild(externalHost)
+})

src/downshift.js

@@ -764,7 +764,16 @@ class Downshift extends Component {
         return
       }
 
-      const {activeElement} = this.props.environment.document
+      let {activeElement} = this.props.environment.document
+
+      // find the real activeElement not a custom element with a shadowRoot
+      /* istanbul ignore next -- JSDOM always reports the focused element as document.activeElement */
+      while (
+        activeElement?.shadowRoot &&
+        activeElement.shadowRoot.activeElement != null
+      ) {
+        activeElement = activeElement.shadowRoot.activeElement
+      }
 
       if (
         (activeElement == null || activeElement.id !== this.inputId) &&
@@ -877,7 +886,15 @@ class Downshift extends Component {
         return
       }
 
-      const {activeElement} = this.props.environment.document
+      let {activeElement} = this.props.environment.document
+      /* istanbul ignore next -- JSDOM always reports the focused element as document.activeElement */
+      while (
+        activeElement?.shadowRoot &&
+        activeElement.shadowRoot.activeElement != null
+      ) {
+        activeElement = activeElement.shadowRoot.activeElement
+      }
+
       const downshiftButtonIsActive =
         activeElement?.dataset?.toggle &&
         this._rootNode &&

src/hooks/useCombobox/index.js

@@ -129,8 +129,17 @@ function useCombobox(userProps = {}) {
     if (!isOpen || !environment?.document || !inputRef?.current?.focus) {
       return
     }
+    let {activeElement} = environment.document
+    // find the real activeElement not a custom element with a shadowRoot
+    /* istanbul ignore next -- JSDOM always reports the focused element as document.activeElement */
+    while (
+      activeElement?.shadowRoot &&
+      activeElement.shadowRoot.activeElement != null
+    ) {
+      activeElement = activeElement.shadowRoot.activeElement
+    }
 
-    if (environment.document.activeElement !== inputRef.current) {
+    if (activeElement !== inputRef.current) {
       inputRef.current.focus()
     }
   }, [isOpen, environment])

test/react-shadow.js

@@ -21,11 +21,11 @@ const shadowRootSupported =
 
 /**
  * @param {object} props Properties passed to the component
- * @param {boolean} props.declarative  When true, uses a declarative shadow root
- * @param {boolean} props.delegatesFocus  Expands the focus behavior of elements within the shadow DOM.
- * @param {string} props.mode Sets the mode of the shadow root. (open or closed)
- * @param {CSSStyleSheet[]} props.stylesheets Takes an array of CSSStyleSheet objects for constructable stylesheets.
- * @param {React.ReactNode} props.children The children of the component
+ * @param {boolean} [props.declarative] When true, uses a declarative shadow root
+ * @param {boolean} [props.delegatesFocus] Expands the focus behavior of elements within the shadow DOM.
+ * @param {string} [props.mode] Sets the mode of the shadow root. (open or closed)
+ * @param {CSSStyleSheet[]} [props.stylesheets] Takes an array of CSSStyleSheet objects for constructable stylesheets.
+ * @param {React.ReactNode} props.children The component to render within the shadow root.
  */
 const ReactShadowRoot = ({
   declarative = false,