[RAC] Stacked modals: closing overlay dismisses the one beneath it during its exit animation

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

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

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

Đánh giá

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

Hướng nghiên cứu

Bắt đầu với packages/react-aria/src/overlays/useOverlay.ts, đặc biệt là stack visibleOverlays và việc xử lý tương tác bên ngoài, sau đó so sánh hành vi mounting trong packages/react-aria-components/src/Modal.tsx. Tái hiện trường hợp modal xếp chồng trong CodeSandbox được liên kết; hoàn thành khi modal trên cùng đang thoát vẫn là chủ sở hữu tương tác cho đến khi bị unmount, để modal bên dưới không bị đóng.

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

Mô tả

needs investigation
Provide a general summary of the issue here

With stacked modals (a Modal/ModalOverlay opened on top of another), closing the top modal while it has an exit animation can cause the modal underneath it to be dismissed by an outside-click that actually landed on the still-animating top modal.

🤔 Expected Behavior?

A modal that's still mounted and visually on top (mid exit-animation) should keep owning pointer interactions that land on it. Only a click genuinely outside all modals should dismiss the one beneath.

😯 Current Behavior

useOverlay only lets the topmost entry in its visibleOverlays stack react to outside interactions, but stack membership is keyed on isOpen — an overlay is spliced out the instant it starts closing:

https://github.com/adobe/react-spectrum/blob/54d1b2b3c8c2a84fd54cccadca2d9cb5d742b943/packages/react-aria/src/overlays/useOverlay.ts#L80-L91

react-aria-components, however, keeps the closing overlay mounted (backdrop + content, still on top, still hit-testable) until its exit animation finishes:

https://github.com/adobe/react-spectrum/blob/54d1b2b3c8c2a84fd54cccadca2d9cb5d742b943/packages/react-aria-components/src/Modal.tsx#L205-L206

So during the exit animation the top overlay is gone from the stack but still physically covers the one beneath. A pointer interaction landing on it is, for the overlay beneath, "outside", and since that overlay is now visibleOverlays[last], the handler fires onHide() and closes it:

https://github.com/adobe/react-spectrum/blob/54d1b2b3c8c2a84fd54cccadca2d9cb5d742b943/packages/react-aria/src/overlays/useOverlay.ts#L94-L126

The "only the topmost visible overlay reacts to outside interactions" invariant is silently broken for any overlay mid exit-animation.

💁 Possible Solution

Keep an overlay in visibleOverlays until it actually unmounts, so it stays topmost as long as it's physically on top.

🔦 Context

We have a picker modal inside a dialog (pick an item, the picker closes, click something on the dialog, which lands on the exiting picker). Worked around it with a shouldCloseOnInteractOutside on the outer modal, ignoring interactions whose target is inside a modal.

🖥️ Steps to Reproduce
  1. Stack dismissable ModalOverlay A, then B on top, both with isExiting exit animations.
  2. Close B
  3. While B is closing, click again
  4. A will close because clicking on the exiting B is considered outside A

Code sandbox: https://codesandbox.io/p/sandbox/dvnjy5

https://github.com/user-attachments/assets/58b286f1-6ab7-40cf-9491-c0efb822a848

Version

react-aria-components 1.19.0 (react-aria 3.50.0)

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Ngôn ngữ chính
TypeScript
Star
16k
Fork
1.6k
Merge trung bình
2 ngày 19 giờ
Pull request đã merge (30 ngày)
41

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 adobe/react-spectrum

Tất cả issue của adobe/react-spectrum

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.