Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

[Feat] Support disabling or targeting the second `.pac-container` injected by Google Autocomplete

Đang mở
  • Có gì không ổn?
#770 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 2 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
25/100
Loại issue
Tính năng
Độ rõ ràng
Cần làm rõ
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu từ component và tái hiện hai phần tử .pac-container được chèn bằng widget Google Places Autocomplete. Kiểm tra xem Google Maps JavaScript API có cho phép vô hiệu hóa hoặc nhắm đến container thứ hai hay không, sau đó xác định liệu một prop được hỗ trợ có khả thi hay nên ghi lại giới hạn này trong tài liệu.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Target Use Case

Hi 👋 and thank you for the great work on this library!

I'm currently using the <Autocomplete> component from @react-google-maps/api and I noticed that, when the Google Places Autocomplete widget is initialized, it injects two div.pac-container elements into the DOM.

  • The first seems to contain the actual place predictions.
  • The second appears to be used for internal styling or highlight rendering.

While this behavior comes from the underlying Google Maps JavaScript API, it creates styling and layout issues in certain cases (e.g., inside modals or custom UI containers), especially when trying to apply scoped CSS in a React app.

Feature Request

Would it be possible to expose a prop or configuration option on the <Autocomplete> component that allows:

  1. Either disabling the second .pac-container (if safe and feasible), or
  2. Assigning a custom className or wrapper element to help us target it more precisely with CSS.

Even though this is mostly controlled by Google’s API, some developers might benefit from being able to more easily identify or interact with the injected containers.

Alternatives Considered

I tried this but it doesn't work

.pac-container:nth-of-type(2) {
  display: none !important;
}
Context

I'm using the latest version of the library with React 18, and I've confirmed the behavior is consistent across several environments. If there's a known workaround or best practice for this case, I'd appreciate any pointers!

Thanks again for your hard work 🙏

Image

Proposal

I don't have any proposal for now

Ngôn ngữ chính
TypeScript
Star
1.9k
Fork
195
Merge trung bình
2 ngày 11 giờ
Pull request đã merge (30 ngày)
14

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của visgl/react-google-maps

Tất cả issue của visgl/react-google-maps

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.