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 issue where dialog is unable to be closed #2288

Merged
merged 4 commits into from
Oct 18, 2023

Conversation

TylerJDev
Copy link
Contributor

@TylerJDev TylerJDev commented Oct 17, 2023

Authors: Please fill out this form carefully and completely.

Reviewers: By approving this Pull Request you are approving the code change, as well as its deployment and mitigation plans.
Please read this description carefully. If you feel there is anything unclear or missing, please ask for updates.

What are you trying to accomplish?

Fixes bug where dialog is unable to be closed if another dialog is opened at the time.

Screenshots

Integration

List the issues that this change affects.

https://github.com/github/primer/issues/2748

Risk Assessment

  • Low risk the change is small, highly observable, and easily rolled back.
  • Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
  • High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

We currently store active dialogs in an array named overlayStack. When clicking the close button, we check if the button is within the dialog that was most recently opened. If it is not, then you are unable to close the dialog through clicking the button.

This PR aims to fix that issue by removing the topLevelDialog dependency.

Anything you want to highlight for special attention from reviewers?

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Added/updated previews (Lookbook)
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

@changeset-bot
Copy link

changeset-bot bot commented Oct 17, 2023

🦋 Changeset detected

Latest commit: a108bca

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/view-components Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@TylerJDev TylerJDev temporarily deployed to preview October 17, 2023 20:41 — with GitHub Actions Inactive
@github-actions github-actions bot added the javascript Pull requests that update Javascript code label Oct 17, 2023
@TylerJDev TylerJDev temporarily deployed to preview October 17, 2023 20:53 — with GitHub Actions Inactive
Comment on lines -33 to -35
// Find the top level dialog that is open.
const topLevelDialog = overlayStack[overlayStack.length - 1]
if (!topLevelDialog) return
Copy link
Contributor Author

@TylerJDev TylerJDev Oct 17, 2023

Choose a reason for hiding this comment

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

It did not seem like we needed to rely on checking if the "top level" dialog was open at this point. The function should only be ran the moment a user clicks the close button. This should only target the dialog where that event stemmed, and shouldn't affect any other dialogs that are open.

I removed this logic and replaced it with a conditional that will only check if one of the two acceptable button data-* attributes exist.

@TylerJDev TylerJDev temporarily deployed to preview October 17, 2023 21:15 — with GitHub Actions Inactive
@TylerJDev TylerJDev marked this pull request as ready for review October 17, 2023 21:30
@TylerJDev TylerJDev requested review from a team and keithamus October 17, 2023 21:30
Copy link
Member

@keithamus keithamus left a comment

Choose a reason for hiding this comment

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

LGTM!

Would you be able to write some tests?

@TylerJDev TylerJDev merged commit caf0996 into main Oct 18, 2023
27 checks passed
@TylerJDev TylerJDev deleted the tylerjdev/nested-modal-dialog-close-fix branch October 18, 2023 02:30
@TylerJDev TylerJDev temporarily deployed to preview October 18, 2023 02:30 — with GitHub Actions Inactive
@primer primer bot mentioned this pull request Oct 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
javascript Pull requests that update Javascript code patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants