Skip to content

Conversation

didoo
Copy link
Contributor

@didoo didoo commented Jun 19, 2025

📌 Summary

This is a branch that is used to test a possible fix for the issue of a Modal being closed not by using the F.close method, but by simply removing it from the DOM.

With the current logic, there's no cleanup (the willDestroyNode is invoked but the cleanup is done in the onDismiss function).

This PR does multiple things:

  • adds detailed logging to the Modal backing class, so we can see the order or execution and which functions are called (and their nested invocation)
  • adds a couple of examples to the showcase page, to demonstrate the bug
  • does a large refactoring, so the naming is more meaningful and the order of executions easier to follow
  • removes the onDeactivate=this.onManualDismiss from the focus-trap options, because it was invoking the "manual" dismiss even with a non-manual closure, or otherwise it caused the onDismiss to be called twice (see below)

The idea is to:

  • see that all the HDS tests are passing (we will need to add more for this fix, to test the case that we didn't consider)
  • smoke test the solution/fix across different products/consumers
  • if everything works, prepare a proper PR and from there on follow the standard process (testing, review, approval, release)

📸 Screenshots

Difference in Atlas, between when the modal is closed via dismiss vs submit
screenshot_5104

Video of the fix working:
https://github.com/user-attachments/assets/f81e2e6f-7806-4731-b518-91e29eaabcb8

Reason why the onDeactivate=this.onManualDismiss has been removed from the focus-trap options (see red areas):
screenshot_5103

🔗 External links

Jira ticket: https://hashicorp.atlassian.net/browse/HDS-4975


👀 Component checklist

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist
  • If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
  • If applicable, I've worked with GRC to document the impact of any changes to security controls.
    Examples of changes to controls include access controls, encryption, logging, etc.
  • If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
    Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

Copy link

vercel bot commented Jun 19, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
hds-showcase ✅ Ready (Inspect) Visit Preview Jun 20, 2025 9:07am
hds-website ✅ Ready (Inspect) Visit Preview Jun 20, 2025 9:07am

super(owner, args);

registerDestructor(this, (): void => {
document.removeEventListener('click', this._clickHandler, true);
Copy link
Collaborator

Choose a reason for hiding this comment

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

I don't follow all of the changes here, but why not do the style cleanup here and remove the use of will-destroy render modifier?
(the destructor will run when the component is cleaned up / unrendered)

@didoo
Copy link
Contributor Author

didoo commented Jun 23, 2025

This can be closed now. We may use it as reference for the refactoring of the Modal/Flyout logic.

@didoo didoo closed this Jun 23, 2025
@didoo didoo deleted the modal-testing branch September 3, 2025 15:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants