[Autocomplete][joy] Fix Autocomplete and Modal components to work together

[saikathalderr]

Fixed In Joy UI Autocomplete and Modal do not work properly together.

closes #37501

After:

Screen.Recording.2566-06-22.at.10.59.41.mov

https://codesandbox.io/s/joy-cra-ts-forked-kcds54?file=/src/App.tsx

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

[mui-bot]

Netlify deploy preview

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

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against eeef6ec

[mnajdova]

@siriwatknp can you please check this.

[siriwatknp]

@saikathalderr Thanks for the fix. I think it is partially done because by adding zIndex might work with Modal but it introduces another bug when you use the Autocomplete outside of the Modal.

For example, you have a header with a sticky position (zIndex < the modal) if you scroll the page while Autocomplete's listbox is open, you will see that the listbox is above the header.

I think the solution is still using zIndex but with a CSS variable so that it can be controlled by the context (components).

[siriwatknp]

I don't recall why disablePortal is used here but I think it should not have it true by default to be consistent with other popup.

[siriwatknp]

👍 Thanks for initiating the fix!