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

[Bug]: fluent-dialog with type="alert" doesn't raise the "beforeToggle" and "Toggle" events (using ESC key) #33500

Open
2 tasks done
dvoituron opened this issue Dec 20, 2024 · 0 comments

Comments

@dvoituron
Copy link

Component

Other...

Package version

3.0.0-beta.74

@microsoft/fast-element version

2.0.0

Environment

System:
OS: Windows 11 10.0.26100
CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
Memory: 15.40 GB / 31.71 GB
Browsers:
Edge: Chromium (130.0.2849.56), ChromiumDev (131.0.2889.0)
Internet Explorer: 11.0.26100.1882
npmPackages:
@fluentui/web-components: 3.0.0-beta.74 => 3.0.0-beta.74

Current Behavior

I'm working on the next version of the FluentUI-Blazor components, using your new WebComponents.

I'm using the new fluent-dialog component which works correctly except when I set the type=“alert”. In this case, the beforetoggle and toggle are not raised pressing ESC to close the window. I'm having trouble detecting that the dialog is closed and freeing up resources in my code.

Expected Behavior

Both events must be raised in all cases :-)

Reproduction

https://stackblitz.com/edit/typescript-z44any96

Steps to reproduce

  1. You can try this code, which works: messages are displayed in the console.
  2. After updated the type="modal" to type="alert" no more messages are displayed in the console when ESC is pressed to close the dialog
<div>
  <fluent-button id="myDialogButton" onclick="ShowDialog()">Open Dialog</fluent-button>
  <fluent-dialog id="myDialog" type="modal">   <!-- 👈 UPDATE THIS `type` attribute to "alert" -->
    <fluent-dialog-body>
      <div slot="title">Default Dialog</div>
      <p>Press ESC to close the dialog.</p>
    </fluent-dialog-body>
  </fluent-dialog>
</div>

<script>
  const myDialog = document.getElementById('myDialog');

  myDialog.addEventListener('toggle', (event) => {
    console.log('toggle', event.detail);
  });

  myDialog.addEventListener('beforetoggle', (event) => {
    console.log('beforetoggle', event.detail);
  });

  function ShowDialog() {
    myDialog.show();
  }
</script>

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: No status
Development

No branches or pull requests

1 participant