Patch DOM traversal

Author: sbaechler

src/__tests__/downshift.shadow-root.js

@@ -1,11 +1,36 @@
 import * as React from 'react'
-import {render} from '@testing-library/react'
+import {render, buildQueries, queryAllByRole} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import Downshift from '../'
 import DropdownSelect from '../../test/useSelect.test'
-import DropdownCombobox from '../../test/useCombobox.test'
+import DropdownCombobox, {colors} from '../../test/useCombobox.test'
 import DropdownMultipleSelect from '../../test/useMultipleSelect.test'
 import {ReactShadowRoot} from '../../test/react-shadow'
 
+
+function _queryAllByRoleDeep(container, ...rest) {
+    // eslint-disable-next-line testing-library/prefer-screen-queries
+    const result = queryAllByRole(container, ...rest) // replace here with different queryAll* variants.
+    for (const element of container.querySelectorAll('*')) {
+      if (element.shadowRoot) {
+        result.push(..._queryAllByRoleDeep(element.shadowRoot, ...rest))
+      }
+    }
+  
+    return result
+  }
+  
+  // eslint-disable-next-line no-unused-vars
+  const [_queryByRoleDeep, _getAllByRoleDeep, _getByRoleDeep, _findAllByRoleDeep, _findByRoleDeep] = buildQueries(
+    _queryAllByRoleDeep,
+    (_, role) => `Found multiple elements with the role ${role}`,
+    (_, role) => `Unable to find an element with the role ${role}`
+  )
+
+  const getAllByRoleDeep = _getAllByRoleDeep.bind(null, document.body)
+  const getByRoleDeep = _getByRoleDeep.bind(null, document.body)
+
+
 const Wrapper = ({children}) => {
   return <ReactShadowRoot>{children}</ReactShadowRoot>
 }
@@ -33,3 +58,113 @@ test('DropdownMultipleSelect renders with a shadow root', () => {
 
   expect(container.shadowRoot).toBeDefined()
 })
+
+test('DropdownSelect works correctly in shadow DOM', async () => {
+  const user = userEvent.setup()
+  const {container} = render(<DropdownSelect />, {wrapper: Wrapper})
+
+  // Verify shadow root exists
+  expect(container.shadowRoot).toBeDefined()
+  
+  // Get elements within the shadow root
+  const toggleButton = getByRoleDeep('combobox')
+  const menu = getByRoleDeep('listbox')
+  expect(toggleButton).toBeInTheDocument()
+  expect(menu).toBeInTheDocument()
+  
+  // Initially menu should be closed
+  expect(toggleButton).toHaveAttribute('aria-expanded', 'false')
+  
+  // Open the dropdown
+  await user.click(toggleButton)
+  
+  // Menu should now be open
+  expect(toggleButton).toHaveAttribute('aria-expanded', 'true')
+  
+  // Select an item
+  const blackOption = getByRoleDeep('option', {name: 'Black'})
+  await user.click(blackOption)
+  
+  // Menu should close and selected item should appear in button
+  expect(toggleButton).toHaveAttribute('aria-expanded', 'false')
+  expect(toggleButton).toHaveTextContent('Black')
+  
+  // Open it again
+  await user.click(toggleButton)
+  expect(toggleButton).toHaveAttribute('aria-expanded', 'true')
+  
+  // Click outside (this tests our targetWithinDownshift with composedPath)
+  await user.click(document.body)
+  
+  // Menu should close
+  expect(toggleButton).toHaveAttribute('aria-expanded', 'false')
+})
+
+test('DropdownCombobox works correctly in shadow DOM', async () => {
+  const user = userEvent.setup()
+  const {container} = render(<DropdownCombobox />, {wrapper: Wrapper})
+
+  // Verify shadow root exists
+  expect(container.shadowRoot).toBeDefined()
+  
+  // Get elements within the shadow root
+  const input = getByRoleDeep('combobox')
+  const toggleButton = getByRoleDeep('button', {name: 'toggle menu'})
+  const clearButton = getByRoleDeep('button', {name: 'clear'})
+  const menu = getByRoleDeep('listbox')
+  
+  expect(input).toBeInTheDocument()
+  expect(toggleButton).toBeInTheDocument()
+  expect(clearButton).toBeInTheDocument()
+  expect(menu).toBeInTheDocument()
+  
+  // Initially menu should be closed
+  expect(input).toHaveAttribute('aria-expanded', 'false')
+  expect(toggleButton).toHaveAttribute('aria-expanded', 'false')
+  
+  // Open the dropdown
+  await user.click(toggleButton)
+  
+  // Menu should now be open
+  expect(input).toHaveAttribute('aria-expanded', 'true')
+  
+  // All colors should initially be visible
+  const items = getAllByRoleDeep('option')
+  expect(items).toHaveLength(colors.length)
+  
+//   // Type in the input to filter items
+//   await user.click(input)
+//   input.focus()
+//   expect(input).toHaveFocus()
+//   await user.type(input, 'bl')
+  
+//   // Only Black and Blue should be visible
+//   items = getAllByRoleDeep('option')
+//   await waitFor(() => expect(items).toHaveLength(2))
+//   expect(items[0]).toHaveTextContent('Black')
+//   expect(items[1]).toHaveTextContent('Blue')
+  
+  // Select an item
+  await user.click(items[0])
+  
+  // Menu should close and input should have selected value
+  expect(input).toHaveAttribute('aria-expanded', 'false')
+  expect(toggleButton).toHaveAttribute('aria-expanded', 'false')
+  expect(input).toHaveValue('Black')
+  
+  // Clear the selection
+  await user.click(clearButton)
+  
+  // Input should be empty
+  expect(input).toHaveValue('')
+  
+  // Open it again
+  await user.click(toggleButton)
+  expect(input).toHaveAttribute('aria-expanded', 'true')
+  
+  // Click outside to close
+  await user.click(document.body)
+  
+  // Menu should close
+  expect(input).toHaveAttribute('aria-expanded', 'false')
+})

src/downshift.js

@@ -1093,6 +1093,8 @@ class Downshift extends Component {
           event.target,
           [this._rootNode, this._menuNode],
           this.props.environment,
+          true,
+          'composedPath' in event && event.composedPath(),
         )
         if (!contextWithinDownshift && this.getState().isOpen) {
           this.reset({type: stateChangeTypes.mouseUp}, () =>
@@ -1120,6 +1122,7 @@ class Downshift extends Component {
           [this._rootNode, this._menuNode],
           this.props.environment,
           false,
+          'composedPath' in event && event.composedPath(),
         )
         if (
           !this.isTouchMove &&

src/hooks/utils.js

@@ -390,7 +390,13 @@ function useMouseAndTouchTracker(
       mouseAndTouchTrackersRef.current.isMouseDown = false
 
       if (
-        !targetWithinDownshift(event.target, downshiftElements, environment)
+        !targetWithinDownshift(
+          event.target,
+          downshiftElements,
+          environment,
+          true,
+          'composedPath' in event && event.composedPath(),
+        )
       ) {
         handleBlur()
       }
@@ -412,6 +418,7 @@ function useMouseAndTouchTracker(
           downshiftElements,
           environment,
           false,
+          'composedPath' in event && event.composedPath(),
         )
       ) {
         handleBlur()

src/utils.js

@@ -417,6 +417,7 @@ function getNonDisabledIndex(
  * @param {HTMLElement[]} downshiftElements The elements that form downshift (list, toggle button etc).
  * @param {Window} environment The window context where downshift renders.
  * @param {boolean} checkActiveElement Whether to also check activeElement.
+ * @param {boolean} composedPath Whether to check the composed path.
  *
  * @returns {boolean} Whether or not the target is within downshift elements.
  */
@@ -425,20 +426,34 @@ function targetWithinDownshift(
   downshiftElements,
   environment,
   checkActiveElement = true,
+  composedPath,
 ) {
-  return (
-    environment &&
-    downshiftElements.some(
-      contextNode =>
-        contextNode &&
-        (isOrContainsNode(contextNode, target, environment) ||
+  if (!environment) {
+    return false
+  }
+
+  // Find the real activeElement by drilling through shadow roots
+  let activeElement = environment.document.activeElement
+  while (
+    activeElement != null &&
+    activeElement.shadowRoot != null &&
+    activeElement.shadowRoot.activeElement != null
+  ) {
+    activeElement = activeElement.shadowRoot.activeElement
+  }
+
+  return downshiftElements.some(
+    contextNode =>
+      contextNode &&
+      (composedPath
+        ? // Check if the contextNode is in the event's composed path
+          composedPath.indexOf(contextNode) !== -1 ||
           (checkActiveElement &&
-            isOrContainsNode(
-              contextNode,
-              environment.document.activeElement,
-              environment,
-            ))),
-    )
+            isOrContainsNode(contextNode, activeElement, environment))
+        : // Fall back to regular DOM traversal when composedPath not available
+          isOrContainsNode(contextNode, target, environment) ||
+          (checkActiveElement &&
+            isOrContainsNode(contextNode, activeElement, environment))),
   )
 }
 

test/useCombobox.test.tsx

@@ -52,7 +52,7 @@ export default function DropdownCombobox() {
           {isOpen ? <>&#8593;</> : <>&#8595;</>}
         </button>
         <button
-          aria-label="toggle menu"
+          aria-label="clear"
           data-testid="clear-button"
           onClick={() => selectItem(null)}
         >