clear() throws error (The element to be cleared could not be focused) in shadow DOM

[nolanlawson]

Reproduction example

https://stackblitz.com/edit/js-4pfvam?file=index.js

Prerequisites

To repro, create an <input> in a shadow root, and then try to clear() it:

import userEvent from '@testing-library/user-event';

const appDiv = document.getElementById('app');

appDiv.attachShadow({ mode: 'open' }).innerHTML = '<input type=text>';
const input = appDiv.shadowRoot.querySelector('input');

userEvent.clear(input); // throws the Error

Expected behavior

An <input> should be clear()able regardless of whether it's in a shadow root or not. It's still focusable, even if it's in a shadow root.

Actual behavior

The error is thrown: The element to be cleared could not be focused

The root cause seems to be this line of code:

https://github.com/testing-library/user-event/blob/7a305dee9ab833d6f338d567fc2e862b4838b76a/src/utility/clear.ts#L12C1-L14

The issue is that document.activeElement is not sufficient for determining the active element in this case. You would need to drill down one level deeper into the shadow root:

document.activeElement // shadow host element
document.activeElement.shadowRoot.activeElement // <input>

User-event version

14.4.3

Environment

See repro above.

Additional context

This used to work in a previous version of @testing-libray/user-event. It seems to have started throwing in this commit: 1cda1b1

[Christian24]

This might be resolved through #1038, #1040, #1033

[marcysutton]

I'm seeing this same error without Shadow DOM. When I create a JSX element in my test and try to clear it, I get the same error message.

[ritchieanesco]

+1. Using react-hook-form and settings have validation execute on form submit, this error occurs. If i change settings to occur on change, not issue.