[Select] Unable to trigger click events on Chips

[jonsmithers]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

There is no obvious way to listen for click events on Chip components inside a Select component.

Expected Behavior 🤔

Should be able to listen for click events, which was possible in version 4.7.0.

Steps to Reproduce 🕹

https://codesandbox.io/s/fervent-murdock-mcc7i?fontsize=14&hidenavigation=1&theme=dark

1. Select some options from the dropdown.
2. Try clicking on the Chips that have showed up in the Select input.
3. With each click, the dropdown opens again, but no click events for Chips are triggered (nothing is logged in the console).

NOTE - When you change the version from 4.7.1 to 4.7.0 in package.json, this issue goes away. It appears this issue was introduced very recently.

Context 🔦

We want to add the "x" delete button to Chips so the user can remove them without re-opening the dropdown.

Your Environment 🌎

Tech	Version
Material-UI	v4.7.1
React	16.12.0
Browser	Chrome 78
TypeScript	yup

[oliviertassinari]

@jonsmithers This is something we have seen coming and I didn't think it was worth supporting out of the box. I'm aware of these workarounds:

1. use the autocomplete component instead for this use case.
2. control the open prop, and to delay the open transition.
3. use the mousedown event instead of the onclick.

Would that work for you?

[jonsmithers]

We actually weren't aware <Autocomplete/> was thing! That could potentially be a better solution.

Setting the open, onClose, and onOpen (with a delay) properties appears to be viable. It just seems like a bit more work for a small thing.

From what I can tell, Chip's onDelete property just won't work in this context. But we could potentially do something like this

<Chip deleteIcon={<Icon onMouseDown={this.onDelete} />} />

(We'd still have to have a "controlled open" with a delay to prevent the dropdown from opening.)

I think we have a way forward. Thank you!

[oliviertassinari]

Happy to hear that you have found a way forward. This change (#17978) was recently released, we still haven't seen the full impact. At least, we also had #18655 open.

[metrip]

From a developer perspective this is quite ugly. I hope there will be a way to use Chip onDelete rather than a monster like

renderValue: (selected: unknown) => (
  <ChipContainer>
    {(selected as string[]).map(value => (
      <Chip
        key={value}
        label={getLabel(value)}
        onDelete={() => {}}
        deleteIcon={
          <div
            onMouseDown={(event: MouseEvent) => {
              if (!props.disabled) {
                event.stopPropagation()
                onDelete(value)
              }
            }}
          >
            <DeleteIcon />
          </div>
        }
      />
    ))}
  </ChipContainer>
)

Controlling the open state "with a delay" is definitely not an option. Customizing Autocomplete to remove the text input field introduces other problems.

[oliviertassinari]

I think that we should keep the chips as presentational only for this component. Head to the Autocomplete for something more dynamic: https://material-ui.com/components/autocomplete/.

[edgarzapeka]

in case someone is still struggling... by stopping the event propagation, the onDelete callback will be executed & it will prevent Select's onOpen callback

<Chip 
...
  onMouseDown={e => {
    e.stopPropagation()
  }
  onDelete={() => {
    // do whatever
  }}
/>

IMO this behaviour is very unexpected and leads to bad UX

[marcusjwhelan]

in case someone is still struggling... by stopping the event propagation, the onDelete callback will be executed & it will prevent Select's onOpen callback

<Chip 
...
  onMouseDown={e => {
    e.stopPropagation()
  }
  onDelete={() => {
    // do whatever
  }}
/>

IMO this behaviour is very unexpected and leads to bad UX

Wasn't able to get this to work but seeing you put onDelete{() => }} helped
the onMouseDown trick didn't help but moving the code out in the onDelete worked

{chips.map((c) => {
    <li>
        <Chip
            ...
            onDelete={() => {
                handleDeleteChip(c)
            }}
        />
    </li>
}

[venkat125]

Hi ppl, Just posting the fix for my scenario.
For my case the issue was due to the order of property placement

<Chip
  onDelete={(e) => {noteChanges(e) }}
  name={option}
  label={option}
  {...getTagProps({ index })}
/>

{...getTagProps({ index })} has to be top in order to avoid property gets overridden

<Chip
  {...getTagProps({ index })}
  onDelete={(e) => {noteChanges(e) }}
  name={option}
  label={option}
/>

Note: I'm using MUI 4.x version
check answer 2 of this link
after placing getTagProps to first position the onDelete event started working.
Happy coding 😊 . . . . .

[fuomag9]

Hi ppl, Just posting the fix for my scenario. For my case the issue was due to the order of property placement

<Chip
  onDelete={(e) => {noteChanges(e) }}
  name={option}
  label={option}
  {...getTagProps({ index })}
/>

{...getTagProps({ index })} has to be top in order to avoid property gets overridden

<Chip
  {...getTagProps({ index })}
  onDelete={(e) => {noteChanges(e) }}
  name={option}
  label={option}
/>

Note: I'm using MUI 4.x version check answer 2 of this link after placing getTagProps to first position the onDelete event started working. Happy coding 😊 . . . . .

WTF this worked for me too

[thefoxes86]

in case someone is still struggling... by stopping the event propagation, the onDelete callback will be executed & it will prevent Select's onOpen callback

<Chip 
...
  onMouseDown={e => {
    e.stopPropagation()
  }
  onDelete={() => {
    // do whatever
  }}
/>

IMO this behaviour is very unexpected and leads to bad UX

This works for me. Very Thanks