模态框内Google Maps自动补全选项无法点击问题求助

• 修改自动补全下拉框的挂载容器
  Google Places自动补全的下拉列表默认挂载在<body>标签下，而非模态框内部，容易被模态框的事件逻辑或层级拦截。可以通过container选项指定下拉框挂载到模态框内的容器中：

// 定位输入框和模态框内的目标容器
const addressInput = document.getElementById('your-address-input');
const autocompleteWrapper = document.getElementById('modal-autocomplete-wrapper');

// 初始化自动补全时指定容器
const autocomplete = new google.maps.places.Autocomplete(addressInput, {
  container: autocompleteWrapper
});

确保modal-autocomplete-wrapper是模态框内的一个元素，且没有设置overflow: hidden。

• 阻止下拉框点击事件冒泡
  部分模态框组件会监听click事件用于关闭或交互，下拉框的点击事件冒泡后可能被模态框拦截。给自动补全的下拉容器添加事件阻止冒泡：

// 获取Google自动补全的下拉容器（类名为.pac-container）
const pacContainer = document.querySelector('.pac-container');
if (pacContainer) {
  pacContainer.addEventListener('click', (e) => {
    e.stopPropagation();
  });
}

• 检查模态框的tabindex与焦点设置
  若模态框设置了tabindex="-1"，可能干扰下拉框的焦点与点击逻辑。可以尝试移除该属性，或者在模态框打开后手动让地址输入框获取焦点：

// 模态框打开后触发输入框聚焦
document.getElementById('your-modal').addEventListener('shown.bs.modal', () => {
  document.getElementById('your-address-input').focus();
});

• 排查模态框的overflow属性
  如果模态框内容容器设置了overflow: auto或hidden，下拉框超出容器范围会被裁剪，导致无法点击。调整容器的overflow属性为visible，或者将下拉框挂载到模态框的顶层容器内。

内容的提问来源于stack exchange，提问作者prajeesh