Improve focus handling for setup Add test for keyboard input on open shadow dom

Author: Christian24

tests/_helpers/setup.ts

@@ -115,18 +115,11 @@ export function getFocusableElement(
   const children = Array.from(parent.children)
   for (const child of children) {
     if ('shadowRoot' in child && child.shadowRoot) {
-      //JSDOM currently does not support delegatesFocus, find the focusable element ourselves, if delegatesFocus is undefined
-
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (child.shadowRoot.delegatesFocus === undefined) {
-        const possibleFocusableChildElement = getFocusableElement(
-          child.shadowRoot,
-        )
-        if (possibleFocusableChildElement) {
-          return possibleFocusableChildElement
-        }
-      } else if (child.shadowRoot.delegatesFocus) {
-        return child as HTMLElement
+      const possibleFocusableChildElement = getFocusableElement(
+        child.shadowRoot,
+      )
+      if (possibleFocusableChildElement) {
+        return possibleFocusableChildElement
       }
     }
   }

tests/keyboard/index.ts

@@ -1,5 +1,9 @@
 import userEvent from '#src'
 import {addListeners, render, setup} from '#testHelpers'
+import {
+  defineShadowInputCustomElementIfNotDefined,
+  ShadowInput,
+} from '../_helpers/shadow-input'
 
 it('type without focus', async () => {
   const {element, user} = setup('<input/>', {focus: false})
@@ -163,3 +167,14 @@ test('disabling activeElement moves action to HTMLBodyElement', async () => {
     body - keyup: c
   `)
 })
+
+describe('on shadow DOM', () => {
+  test('type into an input element', async () => {
+    defineShadowInputCustomElementIfNotDefined()
+    const {element, user} = setup<ShadowInput>('<shadow-input></shadow-input>')
+
+    await user.keyboard('test')
+
+    expect(element.value).toEqual('test')
+  })
+})