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 Tylier Pedrogas ,

Sugar does not have a native address validation option like what is shown in your second screenshot. That would have to be from a 3rd-party customization installed in your Sugar instance; the errant behavior would need to be addressed by that developer. If you are not sure where the customization came from and you are an admin on your instance, go to Admin > Module Loader to see if there is a package installed that matches this functionality. Once you have a package name, you may be able to identify who the original developer was. Alternatively, you can post the package name here, and I may be able to help point you in the right direction. 

Chris

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.