Google Places Autocomplete - doesn't work in a Modal

[mgaussie]

======== TEMPLATE BUG FORM ========

Wappler Version : 3.3.2
Operating System : Mac
Project: NodeJS, MySql 8

Expected behavior

What do you think should happen?

Places Autocomplete should operate normally, and return results as it does on the page the modal exists on.

Actual behavior

What actually happens?

When I add an autocomplete element to a modal, and then try to use the Autocomplete nothing happens - in the dev tools network tab there aren’t even any actions happening.

How to reproduce

Add a working Places Autocomplete to a NodeJS content page
Test this works first, to ensure all the includes are correct.
Then add a new modal and add a input.
Convert input to Places Autocomplete.
Attempt to use Places Autocomplete in the browser.

[Teodor]

Is the autocomplete placed inside the modal?

[mgaussie]

It is yep.

So the main content page has a working Places Autocomplete, but when placing the input and converting to Places Autocomplete in the modal, it doesn’t appear to do anything.

[mgaussie]

Bumping this as it has not been confirmed/fixed.

[Teodor]

Hello @mgaussie it seems to work fine, but the dropdown appears behind the modal.
Bootstrap 4 modal has a z-index of 1050, while the autocomplete dropdown has a z-index of 1000.

You can easily fix this by adding this to your CSS:

.pac-container {
    z-index: 1051;
}

[mgaussie]

Hi @Teodor just managed to test this. I placed the .pac-container css in the css>style.css file, saved and deployed to the docker container but I still have the same issue.

On the page I have a Google Autocomplete that is not in a modal, works fine. Then I have a modal triggered on that page with a Google Autocomplete, I appled the above css and it’s still not displaying the dropdown.

Any other ways I can debug this? Perhaps I should place this in another css file? I just don’t want to touch the bootstrap css file.

[Teodor]

You should not be altering bootstrap css files…
Are you sure the css is uploaded and you cleared your browser cache?

[mgaussie]

Yup, agreed - as I say I don’t want to touch bootstrap files. I only edited the style.css file. I just tried on another browser, completely cleared cache, cookies, history etc. and no luck.

The .css file is deployed, and confirmed as such with no edit icon next to it. Noting the ‘upload’ icon does nothing when clicked, so I just deployed the changes to the docker container.

[Teodor]

Are you sure the style.css files in included on your page?
Do you see your change there when you load: yoursite.com/css/style.css in your browser?

[Teodor]

@mgaussie sorry, my bad - i forgot to mention you need to remove the tabindex="-1" from the modal dialog as well. This will fix your issue.

[mgaussie]

yoursite.com/css/style.css - this is displaying the changes in my browser, so I know that part has worked.

I just assumed all stylesheets would be applied globally, like the bootstrap is.

So I went to the specific content page, and ‘attached’ the style.css sheet to the page.

Unfortunately when I render the page I cannot see the ref link to that stylesheet, it doesn’t seem to be applying.

I also removed the tabindex="-1" but this hasn’t resolved the issue - I assume it’s to do with the style.css sheet not appearing on this page…

[Teodor]

Well have you added the css file on your page? It won’t magically appear if it’s not included on your page. If it’s a content page it needs to be added on the main page…

[mgaussie]

Yes Teo, as you see in my last post - I didn’t realize that the style.css file was not attached globally, as the bootstrap one is. So I went ahead and attached it - what I was doing wrong was attaching it to the content page, and not the main page. I’ve done that and this is now working. Thank you.

[Teodor]

You can add it on your main pages using the Design panel, just open a page and click the Attach stylesheet button available in the Design Panel.

[cgrulke]

Can someone please give a step by step on how to do this in a Wappler project?