Cursor position at the begining

[stesvis]

trafficstars

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

[fercc1097]

I can not see the issue

https://user-images.githubusercontent.com/44392283/171256816-3b507619-3711-4bf0-aff1-9b40cc84f142.mov

[stesvis]

I can not see the issue

Screen.Recording.2022-05-31.at.13.15.51.mov

Thanks for your reply! Sorry maybe I forgot to mention that I am referring to searchable selects, where you can type. If there is a value selected and you want to edit it, you blick in the box and the cursor is always at position 0:

[benquinteros]

Bump

[idiglove]

I investigated and it's because the input itself doesn't have the value. We must ask the maintainers what are the plans on implementing this

[choxnox]

Any updates on this?

[tocttou]

Bumping this for visibility.

[Cypherball]

Bump

[rubimbura]

any solution on this?

[DawnSpark7]

This is a major problem from a UX perspective

[e-monson]

:cricket:

[BideoWego]

This is absolutely still an issue as of v5.4.0. When clicking on the input while it is populated with a value, the cursor is locked at position 0. So if a user wants to edit or add text to the existing value, they have to rewrite the entire value. It is indeed a problem from a UX perspective

[codebravotech]

Bump

[jim-alexander]

🤰 Bumb

[inomn]

same

[elsheraey]

Bump! It seems like a reasonable use for this with isSearchable will lead to another bump in here 🗡️

[siduck]

bump :/

[abdullah-ch-empg]

BUMP

[ganiirsyadi]

Bump

[elsheraey]

Hello Bumpers, check this out. Thanks to whoever made it :)

[mkaraula]

Hello Bumpers, check this out. Thanks to whoever made it :)

Does it work for you? When I select something and then press the button I get selectRef.current is undefined

[elsheraey]

@mkaraula

The cursor works according to my needs.

For the focus button, it's just lacking the ref in the Select component.

<Select
  ref={selectRef} // <<< ADD THIS LINE
  options={options}
  value={value}
  inputValue={inputValue}
  onInputChange={onInputChange}
  onChange={onChange}
  components={{
    Input
  }}
/>

[vigneshwaran-ravi]

In this example, after the value is selected, the options are filtered and showing only selected option. It is indeed a problem from a UX perspective. Maintainer must plan to fix this issue.

[alymkarimg]

bump

[pavan-kumarv]

bump

[Appolinars]

Maybe someone find it usefull. I use this solution for controlled input. Haven't tested yet really deep but it seems work okay for my case.

[russtuck91]

@mkaraula

The cursor works according to my needs.

For the focus button, it's just lacking the ref in the Select component.

<Select
  ref={selectRef} // <<< ADD THIS LINE
  options={options}
  value={value}
  inputValue={inputValue}
  onInputChange={onInputChange}
  onChange={onChange}
  components={{
    Input
  }}
/>

Setting the inputValue prop is what did it for me. Thanks @mkaraula !