feat(clipboard): support input elements in shadow DOM

src/clipboard/copy.ts

@@ -1,10 +1,10 @@
 import {copySelection} from '../document'
 import {type Instance} from '../setup'
-import {writeDataTransferToClipboard} from '../utils'
+import {writeDataTransferToClipboard, getActiveElementOrBody} from '../utils'
 
 export async function copy(this: Instance) {
   const doc = this.config.document
-  const target = doc.activeElement ?? /* istanbul ignore next */ doc.body
+  const target = getActiveElementOrBody(doc)
 
   const clipboardData = copySelection(target)
 

src/clipboard/cut.ts

@@ -1,10 +1,10 @@
 import {copySelection} from '../document'
 import {type Instance} from '../setup'
-import {writeDataTransferToClipboard} from '../utils'
+import {writeDataTransferToClipboard, getActiveElementOrBody} from '../utils'
 
 export async function cut(this: Instance) {
   const doc = this.config.document
-  const target = doc.activeElement ?? /* istanbul ignore next */ doc.body
+  const target = getActiveElementOrBody(doc)
 
   const clipboardData = copySelection(target)
 

src/clipboard/paste.ts

@@ -1,6 +1,7 @@
 import {type Instance} from '../setup'
 import {
   createDataTransfer,
+  getActiveElementOrBody,
   getWindow,
   readDataTransferFromClipboard,
 } from '../utils'
@@ -10,8 +11,7 @@ export async function paste(
   clipboardData?: DataTransfer | string,
 ) {
   const doc = this.config.document
-  const target = doc.activeElement ?? /* istanbul ignore next */ doc.body
-
+  const target = getActiveElementOrBody(doc)
   const dataTransfer: DataTransfer =
     (typeof clipboardData === 'string'
       ? getClipboardDataFromString(doc, clipboardData)

src/event/focus.ts

@@ -1,4 +1,4 @@
-import {findClosest, getActiveElement, isFocusable} from '../utils'
+import {findClosest, getActiveElementOrBody, isFocusable} from '../utils'
 import {updateSelectionOnFocus} from './selection'
 import {wrapEvent} from './wrapEvent'
 
@@ -8,7 +8,7 @@ import {wrapEvent} from './wrapEvent'
 export function focusElement(element: Element) {
   const target = findClosest(element, isFocusable)
 
-  const activeElement = getActiveElement(element.ownerDocument)
+  const activeElement = getActiveElementOrBody(element.ownerDocument)
   if ((target ?? element.ownerDocument.body) === activeElement) {
     return
   } else if (target) {
@@ -23,7 +23,7 @@ export function focusElement(element: Element) {
 export function blurElement(element: Element) {
   if (!isFocusable(element)) return
 
-  const wasActive = getActiveElement(element.ownerDocument) === element
+  const wasActive = getActiveElementOrBody(element.ownerDocument) === element
   if (!wasActive) return
 
   wrapEvent(() => element.blur(), element)

src/utils/focus/getActiveElement.ts

@@ -1,8 +1,6 @@
 import {isDisabled} from '../misc/isDisabled'
 
-export function getActiveElement(
-  document: Document | ShadowRoot,
-): Element | null {
+function getActiveElement(document: Document | ShadowRoot): Element | null {
   const activeElement = document.activeElement
 
   if (activeElement?.shadowRoot) {

tests/_helpers/elements/index.ts

@@ -0,0 +1,21 @@
+import {ShadowInput} from './shadow-input'
+
+const customElements = {
+  'shadow-input': ShadowInput,
+}
+
+export type CustomElements = {
+  [k in keyof typeof customElements]: typeof customElements[k] extends {
+    new (): infer T
+  }
+    ? T
+    : never
+}
+
+export function registerCustomElements() {
+  Object.entries(customElements).forEach(([name, constructor]) => {
+    if (!globalThis.customElements.get(name)) {
+      globalThis.customElements.define(name, constructor)
+    }
+  })
+}

tests/_helpers/elements/shadow-input.ts

@@ -0,0 +1,42 @@
+const observed = ['value']
+
+const template = document.createElement('template')
+template.innerHTML = `
+  <input>
+`
+
+export class ShadowInput extends HTMLElement {
+  private $input?: HTMLInputElement
+
+  static getObservedAttributes() {
+    return observed
+  }
+  constructor() {
+    super()
+
+    this.attachShadow({mode: 'open', delegatesFocus: true})
+    if (this.shadowRoot) {
+      this.shadowRoot.appendChild(template.content.cloneNode(true))
+      this.$input = this.shadowRoot.querySelector('input') as HTMLInputElement
+    }
+    observed.forEach(name => {
+      this.render(name, this.getAttribute(name))
+    })
+  }
+  attributeChangedCallback(name: string, oldVal: string, newVal: string) {
+    if (oldVal === newVal) return
+    this.render(name, newVal)
+  }
+
+  render(name: string, value: string | null) {
+    if (value == null) {
+      this.$input?.removeAttribute(name)
+    } else {
+      this.$input?.setAttribute(name, value)
+    }
+  }
+
+  public get value(): string {
+    return this.$input?.value ?? ''
+  }
+}

tests/_helpers/index.ts

@@ -1,5 +1,21 @@
+import {CustomElements, registerCustomElements} from './elements'
+
 // this is pretty helpful:
 // https://codesandbox.io/s/quizzical-worker-eo909
 
+expect.addSnapshotSerializer({
+  test: (val: unknown) =>
+    Boolean(
+      typeof val === 'object'
+        ? Object.prototype.hasOwnProperty.call(val, 'snapshot')
+        : false,
+    ),
+  print: val => String((<null | {snapshot?: string}>val)?.snapshot),
+})
+
+registerCustomElements()
+
+export type {CustomElements}
+
 export {render, setup} from './setup'
 export {addEventListener, addListeners} from './listeners'

tests/_helpers/setup.ts

@@ -1,7 +1,7 @@
 import {addListeners, EventHandlers} from './listeners'
 import userEvent from '#src'
 import {Options} from '#src/options'
-import {FOCUSABLE_SELECTOR} from '#src/utils'
+import {FOCUSABLE_SELECTOR, getActiveElementOrBody} from '#src/utils'
 import {setSelection} from '#src/event/selection'
 
 export function render<Elements extends Element | Element[] = HTMLElement>(
@@ -28,24 +28,22 @@ export function render<Elements extends Element | Element[] = HTMLElement>(
   if (typeof focus === 'string') {
     ;(assertSingleNodeFromXPath(focus, div) as HTMLElement).focus()
   } else if (focus !== false) {
-    ;(div.querySelector(FOCUSABLE_SELECTOR) as HTMLElement | undefined)?.focus()
+    const element: HTMLElement | null = findFocusable(div)
+    element?.focus()
   }
 
   if (selection) {
     const focusNode =
       typeof selection.focusNode === 'string'
         ? assertSingleNodeFromXPath(selection.focusNode, div)
-        : document.activeElement
+        : getActiveElementOrBody(document)
     const anchorNode =
       typeof selection.anchorNode === 'string'
         ? assertSingleNodeFromXPath(selection.anchorNode, div)
         : focusNode
     const focusOffset = selection.focusOffset ?? 0
     const anchorOffset = selection.anchorOffset ?? focusOffset
 
-    if (!focusNode || !anchorNode) {
-      throw new Error(`missing/invalid selection.focusNode`)
-    }
     setSelection({
       focusNode,
       anchorNode,
@@ -105,3 +103,16 @@ export function setup<Elements extends Element | Element[] = HTMLElement>(
     ...render<Elements>(ui, {eventHandlers, focus, selection}),
   }
 }
+function findFocusable(container: Element | ShadowRoot): HTMLElement | null {
+  for (const el of Array.from(container.querySelectorAll('*'))) {
+    if (el.matches(FOCUSABLE_SELECTOR)) {
+      return el as HTMLElement
+    } else if (el.shadowRoot) {
+      const f = findFocusable(el.shadowRoot)
+      if (f) {
+        return f
+      }
+    }
+  }
+  return null
+}

tests/clipboard/copy.ts

@@ -98,3 +98,15 @@ describe('without Clipboard API', () => {
     expect(dt?.getData('text/plain')).toBe('bar')
   })
 })
+
+describe('on shadow DOM', () => {
+  test('copy in an input element', async () => {
+    const {user} = setup('<shadow-input value="test"></shadow-input>', {
+      selection: {anchorOffset: 0, focusOffset: 4},
+    })
+
+    const data = await user.copy()
+
+    expect(data?.getData('text')).toEqual('test')
+  })
+})

tests/clipboard/cut.ts

@@ -1,5 +1,5 @@
 import userEvent from '#src'
-import {render, setup} from '#testHelpers'
+import {CustomElements, render, setup} from '#testHelpers'
 
 test('cut selected value', async () => {
   const {getEvents, user} = setup<HTMLInputElement>(
@@ -106,3 +106,18 @@ describe('without Clipboard API', () => {
     expect(dt?.getData('text/plain')).toBe('bar')
   })
 })
+describe('on shadow DOM', () => {
+  test('cut in an input element', async () => {
+    const {element, user} = setup<CustomElements['shadow-input']>(
+      '<shadow-input value="test"></shadow-input>',
+      {
+        selection: {anchorOffset: 0, focusOffset: 4},
+      },
+    )
+
+    const data = await user.cut()
+
+    expect(data?.getData('text')).toEqual('test')
+    expect(element.value.length).toEqual(0)
+  })
+})

tests/clipboard/paste.ts

@@ -1,5 +1,5 @@
 import userEvent from '#src'
-import {render, setup} from '#testHelpers'
+import {CustomElements, render, setup} from '#testHelpers'
 import {createDataTransfer} from '#src/utils'
 
 test('paste with empty clipboard', async () => {
@@ -149,3 +149,15 @@ describe('without Clipboard API', () => {
     expect(getEvents()).toHaveLength(0)
   })
 })
+
+describe('on shadow DOM', () => {
+  test('paste into an input element', async () => {
+    const {element, user} = setup<CustomElements['shadow-input']>(
+      '<shadow-input></shadow-input>',
+    )
+
+    await user.paste('test')
+
+    expect(element.value).toEqual('test')
+  })
+})

tests/keyboard/index.ts

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