Address Field not showing options when typing - any modules that has address field (only shows when the page is refreshed) sugarcrm v13.0.2

Hi Jurie,

Sugar changed the z-order of the create drawer. Google's dropdown is displayed but it is behind the drawer.

When you refresh it doesn't create a drawer instead it routes directly to the ../create page, so it works correctly.

We fixed it by adding this to the custom.less file:

.pac-container {
  z-index:99999 !important;
}

There is probably a way to fix it using javascript as well.

Regards,
Matthew

Hi Jurie,

Sugar changed the z-order of the create drawer. Google's dropdown is displayed but it is behind the drawer.

When you refresh it doesn't create a drawer instead it routes directly to the ../create page, so it works correctly.

We fixed it by adding this to the custom.less file:

.pac-container {
  z-index:99999 !important;
}

There is probably a way to fix it using javascript as well.

Regards,
Matthew

For reference, this is how you modify the z-index using javascript. This is after you call google.maps.places.Autocomplete():

// We need to bring the .pac-container forward in the z-order so it isn't hidden by the create drawer
// This came from the chatgpt prompt "with jquery how do I add a style to google auto complete pac-container class"
const observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        if ($(mutation.addedNodes).hasClass('pac-container')) {
            $('.pac-container').css({
                'z-index': 999999
            });
            observer.disconnect(); // Stop observing after styling
        }
    });
});

observer.observe(document.body, {
    childList: true,
    subtree: true
});

As the comment says, chatgpt gave me the idea on how to catch the .pac-container being created so that the css can be modified. There doesn't seem to be any events or callbacks from the google autocomplete object to do this.