Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: keep parent overlays open when not closing child hover overlays #2726

Merged
merged 1 commit into from
Nov 10, 2022

Conversation

Westbrook
Copy link
Contributor

Description

Prevent clicks within ancestor overlays from closing those ancestor overlays.

Related issue(s)

How has this been tested?

  • Test case 1
    1. Go here
    2. Click the first buttons to open the Popover
    3. Hover the first button in the Popover to open the Tooltip
    4. Click the button associated to the Tooltip
    5. See that the Popover is still open

Types of changes

  • Bug fix (non-breaking change which fixes an issue)

Checklist

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • If my change required a change to the documentation, I have updated the documentation in this pull request.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@github-actions
Copy link

github-actions bot commented Nov 10, 2022

Tachometer results

Chrome

action-bar permalink

Version Bytes Avg Time vs remote vs branch
npm latest 244 kB 33.59ms - 34.45ms - unsure 🔍
-1% - +2%
-0.23ms - +0.75ms
branch 248 kB 33.52ms - 34.00ms unsure 🔍
-2% - +1%
-0.75ms - +0.23ms
-

action-menu permalink

Version Bytes Avg Time vs remote vs branch
npm latest 612 kB 220.28ms - 222.48ms - unsure 🔍
-2% - +1%
-4.55ms - +1.67ms
branch 616 kB 219.91ms - 225.73ms unsure 🔍
-1% - +2%
-1.67ms - +4.55ms
-

menu permalink

Version Bytes Avg Time vs remote vs branch
npm latest 311 kB 248.91ms - 252.45ms - unsure 🔍
-1% - +1%
-2.81ms - +1.91ms
branch 315 kB 249.56ms - 252.69ms unsure 🔍
-1% - +1%
-1.91ms - +2.81ms
-

overlay permalink

Version Bytes Avg Time vs remote vs branch
npm latest 348 kB 73.77ms - 74.47ms - unsure 🔍
-0% - +1%
-0.21ms - +0.78ms
branch 351 kB 73.48ms - 74.19ms unsure 🔍
-1% - +0%
-0.78ms - +0.21ms
-

picker permalink

Version Bytes Avg Time vs remote vs branch
npm latest 456 kB 833.11ms - 846.54ms - unsure 🔍
-1% - +1%
-7.91ms - +11.67ms
branch 460 kB 830.82ms - 845.06ms unsure 🔍
-1% - +1%
-11.67ms - +7.91ms
-

popover permalink

Version Bytes Avg Time vs remote vs branch
npm latest 241 kB 30.55ms - 30.78ms - unsure 🔍
-1% - +0%
-0.30ms - +0.04ms
branch 244 kB 30.67ms - 30.92ms unsure 🔍
-0% - +1%
-0.04ms - +0.30ms
-

split-button permalink

Version Bytes Avg Time vs remote vs branch
npm latest 548 kB 2029.88ms - 2033.02ms - unsure 🔍
-0% - +0%
-3.14ms - +0.99ms
branch 552 kB 2031.18ms - 2033.87ms unsure 🔍
-0% - +0%
-0.99ms - +3.14ms
-

tooltip permalink

Version Bytes Avg Time vs remote vs branch
npm latest 248 kB 30.64ms - 30.88ms - unsure 🔍
-1% - +0%
-0.25ms - +0.11ms
branch 251 kB 30.70ms - 30.96ms unsure 🔍
-0% - +1%
-0.11ms - +0.25ms
-
Firefox

action-bar permalink

Version Bytes Avg Time vs remote vs branch
npm latest 244 kB 110.93ms - 125.71ms - unsure 🔍
-10% - +9%
-11.51ms - +10.43ms
branch 248 kB 110.76ms - 126.96ms unsure 🔍
-9% - +10%
-10.43ms - +11.51ms
-

action-menu permalink

Version Bytes Avg Time vs remote vs branch
npm latest 612 kB 425.50ms - 442.26ms - unsure 🔍
-2% - +3%
-10.69ms - +13.21ms
branch 616 kB 424.11ms - 441.13ms unsure 🔍
-3% - +2%
-13.21ms - +10.69ms
-

menu permalink

Version Bytes Avg Time vs remote vs branch
npm latest 311 kB 541.98ms - 554.38ms - faster ✔
1% - 4%
3.79ms - 23.89ms
branch 315 kB 554.11ms - 569.93ms slower ❌
1% - 4%
3.79ms - 23.89ms
-

overlay permalink

Version Bytes Avg Time vs remote vs branch
npm latest 348 kB 177.50ms - 197.70ms - unsure 🔍
-6% - +8%
-11.07ms - +14.79ms
branch 351 kB 177.66ms - 193.82ms unsure 🔍
-8% - +6%
-14.79ms - +11.07ms
-

picker permalink

Version Bytes Avg Time vs remote vs branch
npm latest 456 kB 1155.83ms - 1180.09ms - unsure 🔍
-1% - +2%
-16.63ms - +19.39ms
branch 460 kB 1153.28ms - 1179.88ms unsure 🔍
-2% - +1%
-19.39ms - +16.63ms
-

popover permalink

Version Bytes Avg Time vs remote vs branch
npm latest 241 kB 108.40ms - 125.72ms - unsure 🔍
-10% - +13%
-11.69ms - +15.17ms
branch 244 kB 105.05ms - 125.59ms unsure 🔍
-13% - +10%
-15.17ms - +11.69ms
-

split-button permalink

Version Bytes Avg Time vs remote vs branch
npm latest 548 kB 2169.27ms - 2180.85ms - unsure 🔍
-1% - +0%
-11.71ms - +4.59ms
branch 552 kB 2172.88ms - 2184.36ms unsure 🔍
-0% - +1%
-4.59ms - +11.71ms
-

tooltip permalink

Version Bytes Avg Time vs remote vs branch
npm latest 248 kB 92.93ms - 104.95ms - unsure 🔍
-9% - +10%
-9.11ms - +10.27ms
branch 251 kB 90.75ms - 105.97ms unsure 🔍
-10% - +9%
-10.27ms - +9.11ms
-

@Westbrook Westbrook force-pushed the overlay-stack-mangement branch from a17cd78 to eabad5e Compare November 10, 2022 15:32
@hunterloftis hunterloftis self-assigned this Nov 10, 2022
hunterloftis
hunterloftis previously approved these changes Nov 10, 2022
@@ -611,9 +611,11 @@ export class OverlayStack {
while (index && overlaysToClose.length === 0) {
index -= 1;
const overlay = this.overlays[index];
const path = event.composedPath();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I may not understand what's being checked here enough to label it properly, but consider something like this?

Suggested change
const path = event.composedPath();
const path = event.composedPath();
const isOutsideTriggerAndContent = (!path.includes(overlay.trigger) || overlay.interaction !== 'hover') && !path.includes(overlay.overlayContent;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call. The naming here is hard, but I've paired it with an update comment from the change that broke this, so hopefully it's more understandable in the future.

Comment on lines 616 to 618
(!path.includes(overlay.trigger) ||
overlay.interaction !== 'hover') &&
!path.includes(overlay.overlayContent)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
(!path.includes(overlay.trigger) ||
overlay.interaction !== 'hover') &&
!path.includes(overlay.overlayContent)
isOutsideTriggerAndContent

@Westbrook Westbrook force-pushed the overlay-stack-mangement branch from eabad5e to 8919e5b Compare November 10, 2022 16:02
@Westbrook Westbrook merged commit 643fcff into main Nov 10, 2022
@Westbrook Westbrook deleted the overlay-stack-mangement branch November 10, 2022 16:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Overlayed popover with action buttons with self-managed tool-tips closes when button is clicked
2 participants