search

ErrorPro / react-google-autocomplete

React components for google places API.
MIT License
473 stars 114 forks source link

Pac-container autosuggest not showing with mui dialog #184

Closed e-reifer closed 1 year ago

e-reifer commented 1 year ago

When using the autocomplete form with mui in a dialog as suggested here the z-index values are not compatible with each other so that the autosuggest container will not be visible.

Mui Dialog (fullscreen) has a z-index of 1300 while the pac-container only has 1000.

As a workaround I've decreased z-index of modal dialog but is there maybe a better way to directly affect the z-index of the pac container?

Since my application has a vertical navigation and mobile burger menus which all would then be shown by the lower z-index of the modal, it'd be great to find a way to increase the z-index of the autocomplete container.

AlexeyRDKV commented 1 year ago

Hello, try set the z-index for the pac-container in the root css. .pac-container { z-index: 100000 !important; }

Screenshot 2022-12-09 at 13 20 14
max-programming commented 1 year ago

@AlexeyRDKV In my case, the autocomplete shows up but the mouse interaction doesn't work. I am using ShadCN Dialog/Radix Dialog

antonchuvirau commented 4 months ago

@AlexeyRDKV In my case, the autocomplete shows up but the mouse interaction doesn't work. I am using ShadCN Dialog/Radix Dialog

Have you found the solution?

Gcarter17 commented 3 months ago

Ended up creating a Modal that's always mounted and gets visibility set to hidden when the typical dialog would be closed. Issue didn't seem to be with the z-index of the pac-container, but the way "materialRef" was getting handled with the mounting and unmounting of the dialog