Inputs are not focused when clicked (v14)

[IanVS]

Reproduction example

https://github.com/IanVS/storybook-testing-user-event-click-focus

Prerequisites

1. Using V14, try to click an input field: await userEvent.click(getByRole('textbox')); for example

Expected behavior

The input element should be fully focused, ready to accept user input (flashing cursor).

Actual behavior

The input is half-way focused, with a focus ring, but no flashing cursor.

User-event version

14.3.0

Environment

Testing Library framework: @testing-library/react@13.3.0

JS framework: react@18.2.0

Test environment: storybook@6.5.9

DOM implementation: browser

Additional context

This was working correctly in V13. I have instructions in the README of the reproduction of how to verify.

[ph-fritsche]

Are you sure this is an issue with user-event ?
If yes, please break it down to a reproduction example that doesn't wrap user-event in third-party code.
If not, please raise this with https://github.com/storybookjs/testing-library. I don't know if their integration is correct and it seems they reverted and postponed the upgrade to v14.

[IanVS]

I did also experience the issue when using user-event directly, and as I describe in the readme, forcing npm to download v13 causes user-event to work correctly. But I can modify the reproduction if that's helpful.

[IanVS]

I've pushed an update to the reproduction to import from @testing-library/user-event directly, with the same behavior.

[ph-fritsche]

Thanks for the report.

This is odd:
https://codesandbox.io/s/young-https-oghigy?file=/src/App.js

In Firefox the focus is set into the element per .click API, in Chrome it isn't.
But calling .focus() directly on the element works in both. Although this is how the target is focused by the click API internally - resulting in the outline that indicates that the element gained focus 🤔

paste() doesn't work in either browser.

[jaworek]

I'm currently working on updating @testing-library/user-event in my project and it seems that I've stumbled upon the same bug. At first I thought that this is related to #1018, but this seems to be actual reason. Downgrading to v13 fixes the issue for the time being.

[ph-fritsche]

With v14.4 both the .click() and .paste() yield the expected result with one exception:
In Chrome the cursor is missing and .selectionStart/.selectionEnd are always 0 after the click although they should be at value.length

https://codesandbox.io/s/intelligent-zhukovsky-8z89zj?file=/src/App.js

[aaron-nance]

If I use the convenience method (field.click()) I have this issue, but if I use user.click(field), the text field gets focus properly. This happens when I'm using 14.4 with Jest 27.5 and testEnvironment: "jest-environment-jsdom"