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/downshift.js

@@ -764,7 +764,15 @@ 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
+      while (
+        activeElement?.shadowRoot &&
+        activeElement.shadowRoot.activeElement != null
+      ) {
+        activeElement = activeElement.shadowRoot.activeElement
+      }
 
       if (
         (activeElement == null || activeElement.id !== this.inputId) &&
@@ -877,13 +885,26 @@ class Downshift extends Component {
         return
       }
 
-      const {activeElement} = this.props.environment.document
+      let {activeElement} = this.props.environment.document
+      while (
+        activeElement?.shadowRoot &&
+        activeElement.shadowRoot.activeElement != null
+      ) {
+        activeElement = activeElement.shadowRoot.activeElement
+      }
+
       const downshiftButtonIsActive =
         activeElement?.dataset?.toggle &&
         this._rootNode &&
         this._rootNode.contains(activeElement)
 
-      if (!downshiftButtonIsActive) {
+      // We check for the containment of the newly activeElement in the _menuNode here due to iOS emitting a blur event right away when the menu is opened (maybe due to not showing the keyboard?)
+      const activeElementIsInMenu =
+        activeElement &&
+        this._menuNode &&
+        this._menuNode.contains(activeElement)
+
+      if (!downshiftButtonIsActive && !activeElementIsInMenu) {
         this.reset({type: stateChangeTypes.blurInput})
       }
     })

src/hooks/useCombobox/index.js

@@ -129,8 +129,16 @@ 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
+    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,