Open stesvis opened 2 years ago
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:
Bump
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
Any updates on this?
Bumping this for visibility.
Bump
any solution on this?
This is a major problem from a UX perspective
:cricket:
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
Bump
🤰 Bumb
same
Bump! It seems like a reasonable use for this with isSearchable will lead to another bump in here 🗡️
bump :/
BUMP
Bump
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
@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
}}
/>
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.
bump
bump
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.
@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 !
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