testing-library / testing-library/user-event

Selection not cleared when input is focused

Open
#1,204 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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
  1. 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()}"`)
})
  1. 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.

text-select-reproduction

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.