testing-library / testing-library/user-event
Selection not cleared when input is focused
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.3k
- Forks
- 258
- PR merge metrics
- No merged PRs in 30d
Description
Reproduction example
https://codesandbox.io/p/devbox/ykz7x2?file=%2Fsrc%2FrenderApp.test.js
Prerequisites
- Render
<div>Some text</div>
<in
put data-test="input" autofocus>
with javascript
document.querySelector('div').addEventListener('click', () => {
document.querySelector('input').focus()
console.log('activeElement', document.activeElement)
console.log(`selection "${window.getSelection()?.toString()}"`)
})
- Select some text out of the "Some text" div by clicking and dragging the mouse inside the div
await user.pointer([
{target: screen.getByText('Some text'), offset: 1, keys: '[MouseLeft>]'},
{offset: 8},
{keys: '[/MouseLeft]'},
])
await new Promise(resolve => setTimeout(resolve, 100))
Expected behavior
In a real browser, when I select text in the "Some text" element, the selection is visible until the mouse-button is released. Then, the mouse-release triggers a "click" event which. The event-handler is invoked, the input-field is focused.
This causes the selection to be removed.
Actual behavior
The in the test-code the click is triggered as in the browser. The input-element is focused.
But the selection is not removed. window.getSelection.toString() still returns the selected string "ome tex"
User-event version
14.5.2
Environment
Dependencies of the reproduction example
dependencies:
@testing-library/dom 8.12.0
@testing-library/jest-dom 5.16.3
@testing-library/user-event 14.5.2
devDependencies:
@vitejs/plugin-react 4.2.1
husky 4.3.8
jsdom 24.0.0
lint-staged 10.5.4
prettier 1.19.1
vite 5.1.1
vitest 1.4.0
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the reproduction in src/renderApp.test.js from the linked CodeSandbox and run it against the current project. Trace the selection and focus handling used by the pointer and click simulation, then add a regression test showing that focusing the input clears the selected text and confirm the selection is empty afterward.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- testing-qa
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100