Anubhav Dhawan Anubhav Dhawan - 1 year ago 143
React JSX Question

Google Places autocomplete not working (in Bootstrap modal)

I'm trying to include a google places autocomplete input box in my React app.

I've followed the guide here to place an

<input>
text field, and initializing the search box like so:

export default class MySearch extends class Component {
...

componentDidMount() {
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');

var searchBox = new google.maps.places.SearchBox(input, {
bounds: defaultBounds
});
}
render() {
return (
...

<input id="searchTextField"
type="text"
className="form-control"
placeholder="Search for a location"
/>
);
}
}


But I don't see any suggestions dropping down from the text field.

I inspected the networks tab, to see whether API requests are being hit as I type, and I, not only see requests, but responses from the API, with matching locations, based on my search term, as I type through.

I have no idea why the received suggestions are not being displayed in a dropdown suggestions list below my input box.

Thanks in advance :)

Update



PS: I've placed the text box inside a bootstrap modal. When I place exactly the same text box, outside the bootstrap modal, it works like a breeze.

Any idea why the text box isn't showing suggestions while inside the modal?

Answer Source

It is a styling issue, as the modal's z-index > dropdown's (.pac-container's) z-index. Fixed it with the following CSS snippet:

.pac-container {
    background-color: #FFF;
    z-index: 2001;
    position: fixed;
    display: inline-block;
    float: left;
}
.modal{
    z-index: 2000;
}
.modal-backdrop{
    z-index: 1000;
}‚Äč
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download