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"

[IanVS]

@aaron-nance:

the text field gets focus properly.

It does get focus, but in Chrome, it does not get a cursor, so typing into the field after the click does not work.

[chawax]

I still have this problem, focus is not given to the input when using click(). Is there a workaround for this ?

[chawax]

I could make it work using focus() to give focus to the field, then using clear and type.

For example :

await screen.getByRole("textbox").focus();
await user.clear(screen.getByRole("textbox"));
await user.type(screen.getByRole("textbox"), "something");

[chawax]

Actually the focus() solution doesn't work, it is unstable :( So anyone has a reliable workaround for that ?

[IanVS]

Hi, has anyone found a workaround to this issue? It's still blocking my migration to user-event 14, and I'd love to update.

[IanVS]

Actually, I tried upgrading anyway, and my tests are passing, though the codesandbox reproduction above still fails. Not sure what's going on, TBH, but I'll take it!