JedWatson / JedWatson/react-select

Cursor position at the begining

Open
#5,203 35 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

issue/bug-unconfirmed
Dominant language
TypeScript
Stars
28k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

In version 5.3.2 I am still experiencing the cursor always being positioned at the beginning of the text.

Repro

No need for the repro, just try it in the demo at https://react-select.com/home and set the focus on the first select field.
I understand that there is a <span /> and a <div class="react-select__single-value" /> field overlapping, but is there really no solution for this?

UX is a little bit funny when you expect to be able to edit the text but in reality it's empty text...
I found old related issues but they are quite old so I thought I'd give it a try again with a new one. Thx

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 by reproducing the cursor behavior in the react-select demo at https://react-select.com/home, focusing the first select field as described. Read the related older issues and the comment discussion before locating the select input and overlapping span/single-value elements. Done means the focused field places the cursor where expected and preserves an understandable editing experience.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.