You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
You can try this code, which works: messages are displayed in the console.
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-buttonid="myDialogButton" onclick="ShowDialog()">Open Dialog</fluent-button><fluent-dialogid="myDialog" type="modal"><!-- 👈 UPDATE THIS `type` attribute to "alert" --><fluent-dialog-body><divslot="title">Default Dialog</div><p>Press ESC to close the dialog.</p></fluent-dialog-body></fluent-dialog></div><script>constmyDialog=document.getElementById('myDialog');myDialog.addEventListener('toggle',(event)=>{console.log('toggle',event.detail);});myDialog.addEventListener('beforetoggle',(event)=>{console.log('beforetoggle',event.detail);});functionShowDialog(){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.
The text was updated successfully, but these errors were encountered:
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 thetype=“alert”
. In this case, thebeforetoggle
andtoggle
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
type="modal"
totype="alert"
no more messages are displayed in the console when ESC is pressed to close the dialogAre 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
The text was updated successfully, but these errors were encountered: