CODEWITHSUNDEEP
reactjsmaterial-ui
Xen_mar
Xen_mar

Reputation: 9722

Click on rendered item in select field?

In material-ui it is possible to render an element within a Select component. I'd love to render a Chip within a select component. But I'd also love to be able to click on the chip and trigger an onClick handler.

I can't seem to figure out how to make the chip clickable, though. Every click seems to trigger the containing select element.

I created a CodeSandBox to demonstrate my problem.

https://codesandbox.io/s/kind-wu-efiwk?file=/src/App.js

Upvotes: 1

Views: 238

Answers (1)

Danila
Danila

Reputation: 18526

You need to add onMouseDown handler to your Chip component and use stopPropagation there because Select listens to mousedown event.

onMouseDown={e => {
  e.stopPropagation();
}}

Upvotes: 1

Related Questions