react-component / react-component/select
input box inside options, the input text cannot be selected by mouse
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 938
- Forks
- 482
- Avg merge
- 15h 8m
- Merged PRs (30d)
- 2
Description
<Select
dropdownMatchSelectWidth={500}
value={value}
virtual={false}
>
<Option value="1">
Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack
</Option>
<Option value="2">
Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy
</Option>
<Option value="3">
<input
onClick={event => {
event.stopPropagation();
}}
defaultValue='test'
/>
</Option>
</Select>
simply adding an input inside the Option, but the test text in input cannot be selected by mouse.(However, you still can select the text using keyboard)
no idea if it's the virtual list that makes the text un-selectable by mouse. Adding virtual={false}, it will still use virtual list.
If I use dropdownRender, like
dropdownRender1={() => {
return (
<div>
<Option value="2">
Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy
</Option>
<Option value="3">
<input
onClick={event => {
event.stopPropagation();
}}
defaultValue='test'
/>
</Option>
</div>
)
}}
, then the text in input can be selected by mouse.
So...if I don't use dropdownRender, it there any ways that can make the input text selectable? or is there any other props that can totally disable the virtual list?
Contributor guide
No contributing guide indexed for this repository
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
Reproduce the issue with the provided Select, Option, and input example, then compare it with the dropdownRender version and with virtual={false}. Confirm whether mouse selection remains blocked in the standard dropdown and identify whether the completed fix should enable selection or expose a prop that disables the relevant virtual-list behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100