Joy Select : Menu is not opening if you click on the Avatar.

[olivierkastel]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Go to the official documentation: https://mui.com/joy-ui/react-select/#option-component
2. Click on Eric's picture
3. The options show and hide instantly

Current behavior 😯

When clicking on the Option's avatar, the menu opens and closes almost instantly. It works fine if you click elsewhere.

Expected behavior 🤔

The menu should open and should stay open.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

``` System: OS: macOS 12.6 Binaries: Node: 16.13.0 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 8.1.0 - /usr/local/bin/npm Browsers: Chrome: 105.0.5195.125 Edge: Not Found Firefox: 90.0.2 Safari: 16.0 ```

[ZeeshanTamboli]

Thanks for reporting! It's a bug.

[mnajdova]

We should re-use the same logic as in the Basic menu demo, by introducing a preventReopen const - https://mui.com/base/react-menu/#basics

I noticed the same issue in the introduction demo - https://mui.com/base/react-menu/#introduction We may as well fix this with the same iteration. Would be worth double-checking the other menu demos.

I want to emphasize that this would be fixed automatically when we introduce the MenuButton component, but till then we should fix the demos. @ZeeshanTamboli do you want to handle this?

[ZeeshanTamboli]

@mnajdova This issue seems different to me from what you are saying. Here the Joy's select menu is closing after opening, so we want to instead prevent closing of menu automatically if it's opened.

Also I couldn't reproduce it on Base's Menu demos you pointed out towards, but rather in Joy's Select demos:

• https://mui.com/joy-ui/react-select/#option-component
• https://mui.com/joy-ui/react-select/#grouped-options

And yes, I will take a look.

[jesrodri]

Hi, can I try this one?

[ZeeshanTamboli]

@jesrodri Yes, please go ahead. Thanks!

[suyashrastogi7]

Hii, can this issue be assigned to me? I think I know how to fix this bug, Thanks!

[shivam1646]

Hi @ZeeshanTamboli I have created PR #34648 with the fix. Could you please take a look when you get some time. Thanks.

[siriwatknp]

I think we have to weigh the trade-offs between these options:

1. [current] clicking a custom element inside decorators does not trigger select to open.
   pros: You don't need extra code if the decorators are interactive, e.g. an IconButton.
   cons: If non-interactive elements like an Avatar, you need to add sx={{ pointerEvents: 'none' }} to the avatar.
2. clicking anywhere on the select will open.
   pros: It works automatically with non-interactive elements.
   cons: For interactive elements like an IconButton, you need to add event.stopPropagation() to the onClick handler.

Which one is a better DX? I'm also open to other solution if it works better for interactive, non-interactive decorators.

[shivam1646]

@siriwatknp
I think if the default expected behaviour is that Menu should open on clicking anywhere then it should be handled automatically for non-interactive elements.

In current implementation, we are using event.stopPropagation() for interactive elements anyway.
Check https://github.com/mui/material-ui/blob/master/docs/data/joy/components/select/SelectClearable.js#L26 .
Removing event.stopPropagation() results in opening the Menu.

[siriwatknp]

@siriwatknp I think if the default expected behaviour is that Menu should open on clicking anywhere then it should be handled automatically for non-interactive elements.

In current implementation, we are using event.stopPropagation() for interactive elements anyway. Check https://github.com/mui/material-ui/blob/master/docs/data/joy/components/select/SelectClearable.js#L26 . Removing event.stopPropagation() results in opening the Menu.

Thanks for your opinion! I will keep this open for a few weeks to see what others think.

[jesrodri]

I came up with a workaround solution only for the avatar case, but I agree with @shivam1646!
I think his solution is a great one for this case.