react-component / react-component/select

input box inside options, the input text cannot be selected by mouse

Open
#811 0 comments 0 reactions 0 assignees View on GitHub

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

  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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.