[Select] Can't fire a click event inside
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Steps to reproduce 🕹
Making the chips deleteable would seem to be a straightforward extension of this example from the docs:
{selected.map((value) => (
<Chip
key={value}
label={value}
onDelete={(event) => {
event.preventDefault()
event.stopPropagation()
setPersonName(personName.filter(name => name !== value))
}}
/>
))}
Current behavior 😯
This fails because the chip never sees a click event -- it's intercepted by the Select, apparently. See code sandbox example.
Expected behavior 🤔
The chip should register a click event (which I can stop from propagating if I want).
It seems from this issue that the solution is to switch to an Autocomplete instead. Ok, that looks like it will probably do what I want, but I have some code built around the Select component, and it's not clear why the Select needs to work differently here.
Is there some way to make this work with Select?
Your environment 🌎
npx @mui/envinfo
System:
OS: Linux 5.4 Linux Mint 20.3 (Una)
CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
Memory: 895.32 MB / 15.33 GB
Container: Yes
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
Yarn: 3.2.4 - ~/.yarn/bin/yarn
npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
Watchman: 20210409.063814.0 - /usr/local/bin/watchman
Managers:
Cargo: 1.51.0 - ~/.cargo/bin/cargo
pip3: 20.0.2 - /usr/bin/pip3
RubyGems: 3.1.2 - /usr/bin/gem
Utilities:
CMake: 3.16.3 - /usr/bin/cmake
Make: 4.2.1 - /usr/bin/make
GCC: 9.4.0 - /usr/bin/gcc
Git: 2.25.1 - /usr/bin/git
FFmpeg: 4.2.7 - /usr/bin/ffmpeg
Virtualization:
Docker: 20.10.21 - /usr/bin/docker
IDEs:
Nano: 4.8 - /usr/bin/nano
Vim: 0.4.3 - /usr/bin/vim
Languages:
Bash: 5.0.17 - /usr/bin/bash
Java: 11.0.11 - /home/rct/.sdkman/candidates/java/current/bin/javac
Perl: 5.30.0 - /usr/bin/perl
Protoc: 3.17.0 - /usr/local/bin/protoc
Python3: 3.8.10 - /usr/bin/python3
Ruby: 2.7.0 - /usr/bin/ruby
Rust: 1.51.0 - /home/rct/.cargo/bin/rustc
Scala: 2.12.12 - /home/rct/.sdkman/candidates/scala/current/bin/scalac
Databases:
SQLite: 3.32.2 - /home/rct/Android/Sdk/platform-tools/sqlite3
Browsers:
* Chromium: 108.0.5359.94
Firefox: 107.0.1
Monorepos:
Yarn Workspaces: 3.2.4
Lerna: 5.6.2
Contributor guide
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
Start with the Select chip example in the Material UI documentation and reproduce the behavior using the linked CodeSandbox. Trace the Select and Chip event handling to determine why the Chip does not receive clicks; done means a deleteable Chip inside Select receives its click and can stop propagation as shown in the report.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100