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

Ask A Question

Notifications

You’re not receiving notifications from this thread.

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

Eric Stephens asked in Javascript

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";
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 51,723+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2021 GoRails, LLC. All rights reserved.