Автозаполнение Google появляется позади реагирующего модального - PullRequest
Новая
       9

Автозаполнение Google появляется позади реагирующего модального

1 голос
/ 05 ноября 2019

Следующий HTML-код покоится в модальном компоненте, предоставленном activstrap. 

    <div>
      <label htmlFor="address">Location*</label>
      <br />
      <input
        id="address"
        className={classes.WholeWidthInput + " " + classes.BorderOverride}
        type="text"
        onChange={this.handleFormChange.bind(this, "address")}
        onBlur={this.saveAddress.bind(this)}
        required
        placeholder="Find location"
        value={this.props.post.address}
      />{" "}
      <br />
    </div>

Следующий код подключает API Google Maps к указанному выше элементу ввода. 

 handleGoogleSearchLoad = () => {   
     /* global google */
     var defaultBounds = new google.maps.LatLngBounds(
         new google.maps.LatLng(-90, -180),
         new google.maps.LatLng(90, 180)
     );
     var options = { bounds: defaultBounds, types: ['(cities)'] };

     const autocomplete = new google.maps.places.Autocomplete(document.getElementById("address"), options);
     autocomplete.setFields(['address_components', 'formatted_address', 'geometry']);
     this.setState({autocomplete});

 }

Нодело в том, что выпадающий список появляется за модальным, когда я набираю что-то в форму для поиска. Я попробовал предложение .pac_container css, но оно не сработало, или, может быть, я не знаю, где должен был использоваться css. Заранее спасибо.

...