How do I initialize google maps place autocomplete stimulus controller in a tailwindcss-stimulus-components modal?

I'm using Jumpstart Pro, and I set up google maps place autocomplete using this lesson:
Google Maps and Google Places Autocomplete API with Rails, Turbolinks, and Stimulus.js

It works as expected when the form is inline on a page (e.g. /new), however, when I include the form in a tailwindcss-stimulus-components modal, the autocomplete isn't active and I don't see any errors in the console.

How can I make sure the google maps place autocomplete stimulus controller is active/enabled in a tailwindcss-stimulus-components modal?

Thanks!

Stimulus monitors for elements in the DOM, so it should apply to them in the modal. Have you added any debugging code to the Stimulus controller to verify it's finding the correct element and initializing the autocomplete correctly?

Thanks Chris,

I confirmed via console logs that when the page first loads:

• The stimulus controller connects
• The google maps API is initialized: initMap() is called without errors

When I click the button to load the modal, the modal loads but when I start typing in the field that should have google places autocomplete, nothing happens and there are no console errors.

Is there any additional logging you think I should add?

I'm wondering if something in the modal stimulus controller (https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/modal.js) is interfering with or blocking something in the google places stimulus controller.

Hi Chris,

Can you take another look at this?

I'm leaving for vacation on Thursday so I don't have much time, but if you've got some sample code I can run, send me an email. 👍

Z-index to the rescue! The Places Autocomplete was a lower z-index than the modal, so some CSS fixes that nicely by raising it over the z-index of the modal (which was 9999).

Create app/javascript/stylesheets/components/places.scss

// Raise z-index of Google Places Autocomplete higher than the modal z-index
.pac-container {
    z-index: 10000 !important;
}

Add the following to app/javascript/stylesheets/components.scss

@import "components/places";