angular / angular/components

bug(overlay): Weird tooltip issue with the new popover overlay.

Đang mở
#32,747 4 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: cdk/overlay area: material/select area: material/tooltip P4
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### Is this a regression?

- [x] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

v20

### Description

We detected a weird issue with tooltips regarding the popover introduced in v21.
When I put a tooltip on a mat-select, hover over the mat-select, the tooltip is shown. Then I open the mat select and move out my mouse from the browser and bring the mouse back to the browser, the tooltip is shown no matter where i am hovering on with my mouse.
Usually, it is solved after the mat select is closed and opened, then i cannot repro anymore.
But reloading the page and doing it the first time is usually a good repro for the issue.

I'm not sure if I could explain the repro correctly, so here is a short gif:
![Image](https://github.com/user-attachments/assets/5131e9f5-1102-4998-a32f-9586d0027b25)

I scrolled through issues that can be related to my issue, and found this one: https://github.com/angular/components/issues/32642
Turning off the new popover with
`{ provide: OVERLAY_DEFAULT_CONFIG, useValue: { usePopover: false } },` solves the issue.
I cannot reproduce it anymore with usePopover: false.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-3qpcms44?file=package.json,src%2Fmain.ts
Steps to reproduce:
1. Open the page the first time
2. Hover over the mat select
3. Open the mat select
4. Move the mouse outside of the browser
5. Bring back the mouse
6. The tooltip will be shown no matter where i hover over on the page

### Expected Behavior

The tooltip should not be shown everywhere.

### Actual Behavior

The tooltip is shown everywhere.

### Environment

- Angular: v21.1.2
- CDK/Material: v21.1.2
- Browser(s): Chrome latest
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với bản tái hiện StackBlitz được liên kết, đặc biệt là package.json và src/main.ts, rồi thực hiện các bước tooltip/mat-select với usePopover được bật. Xác nhận hành vi khi tải lần đầu trong Chrome; được xem là hoàn tất khi tooltip không còn hiển thị trên toàn bộ trang sau khi rời khỏi và vào lại trình duyệt, trong khi tooltip thông thường vẫn xuất hiện trên mat-select.

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

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Sôi nổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
58/100

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.