[Select] Can't fire a click event inside

[githorse]

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

[michaldudak]

The Select will support such a scenario when we update its implementation to MUI Base's SelectUnstyled. This should arrive with the next major of Material UI (v6). You can use the unstyled component today, but you'll have to style it yourself (see https://codesandbox.io/s/serene-feather-dbmtgg?file=/demo.tsx).

I'll leave the issue open so we can track this problem.

[bmvantunes]

Hello @michaldudak is there any "recommended" workaround while v6 is not out?

I was able to make it "work" by increasing the zIndex of the chip, but then, I have a bug when the list goes on top of the select --> because the zIndex of the chip is higher it will still be visible.