Google Places autocomplete not working (in Bootstrap modal) - google-maps

Question

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 1

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;
}​

Answer 2

DOM reference (findDOMNode)
You should not select a dom element with id in react component. Use ref (reference) instead. Learn more about findDOMNode here https://facebook.github.io/react/docs/react-dom.html#finddomnode
import { findDOMNode } from 'react-dom';
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 = findDOMNode(this.refs['searchTextField']);
var searchBox = new google.maps.places.SearchBox(input, {
bounds: defaultBounds
});
}
render() {
return (
<input ref="searchTextField"
type="text"
className="form-control"
placeholder="Search for a location"
/>
);
}
}