[menu][select] Prevent activation during exit transition

[mj12albert]

Set set pointer-events: none when closed so they can't be accidentally activated during the exit transition

Fixes #27992

• I have followed (at least) the PR section of the contributing guide.

[code-infra-dashboard]

Deploy preview

https://deploy-preview-48347--material-ui.netlify.app/

Bundle size

Bundle	Parsed size	Gzip size
@mui/material	🔺+57B(+0.01%)	0B(0.00%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/private-theming	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.

[siriwatknp]

I want to be very careful on fixes like this.
To me, the issue is a very edge case without upvotes.

Introducing the pointer events none could introduce a different bug that we could not know on the user land.

In my opinion, we could:

• provide the workaround via theming, exactly like the fix you propose and close the issue as not planned
• wait for @silviuaavram opinion

[mj12albert]

To me, the issue is a very edge case without upvotes.

This was also my first impression of the issue, but it's very easily reproducible by a fast/accidental/sloppy click

Autocomplete already added this:

material-ui/packages/mui-material/src/Autocomplete/Autocomplete.js

Lines 616 to 619 in afc6067

	// Prevent interaction with stale cached options during exit transitions.
	// The hook's filteredOptions is [] when popupOpen=false, so clicks on stale
	// rendered options would pass undefined to selectNewValue.
	pointerEvents: popupOpen ? undefined : 'none',

IMO this is a safe change because it's guarded by the popup's open state, so it should have no effect when the popup and options can actually be interacted with

[silviuaavram]

I agree this is really edge case. Looking at the autocomplete change, it's not clear to me if it's for the same thing. The issues linked in the PR seem different, unless I'm mistaken.

[mj12albert]

Looking at the autocomplete change, it's not clear to me if it's for the same thing

The fix in #48327 for #36304 applies CSS pointer-events: none to the options when the open state is false (popup is closed)

The issue with autocomplete is similar but broader than menu/select – autocomplete options incorrectly unmounted before the exit transition finishes, so the fix there persisted them until the transition finished (doesn't happen here); and then same as this PR, added CSS pointer-events: none based on popupOpen: false (it's false when transitioning out) so you can't click them and change the value again when the popup is supposed to be closing @silviuaavram