From 20e91315409036db550edd4f00ff352911f9c275 Mon Sep 17 00:00:00 2001 From: Bernardo Sunderhus Date: Wed, 21 Jun 2023 13:13:56 +0000 Subject: [PATCH] bugfix: enables Escape to dismiss alert Dialog --- ...ialog-4d1d8aec-a33c-4349-94f9-0bf5d23870c0.json | 7 +++++++ .../src/components/Dialog/Dialog.cy.tsx | 4 ++-- .../components/DialogSurface/useDialogSurface.ts | 4 ++-- .../src/components/DialogTrigger/DialogTrigger.tsx | 2 +- .../src/components/DialogTrigger/index.ts | 2 +- ...DialogTrigger.styles.ts => useDialogTrigger.ts} | 0 .../react-dialog/src/utils/index.ts | 1 - .../react-dialog/src/utils/isEscapeKeyDown.ts | 14 -------------- 8 files changed, 13 insertions(+), 21 deletions(-) create mode 100644 change/@fluentui-react-dialog-4d1d8aec-a33c-4349-94f9-0bf5d23870c0.json rename packages/react-components/react-dialog/src/components/DialogTrigger/{useDialogTrigger.styles.ts => useDialogTrigger.ts} (100%) delete mode 100644 packages/react-components/react-dialog/src/utils/isEscapeKeyDown.ts diff --git a/change/@fluentui-react-dialog-4d1d8aec-a33c-4349-94f9-0bf5d23870c0.json b/change/@fluentui-react-dialog-4d1d8aec-a33c-4349-94f9-0bf5d23870c0.json new file mode 100644 index 00000000000000..80b1399bb0935e --- /dev/null +++ b/change/@fluentui-react-dialog-4d1d8aec-a33c-4349-94f9-0bf5d23870c0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "bugfix: enables Escape to dismiss alert Dialog", + "packageName": "@fluentui/react-dialog", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-dialog/src/components/Dialog/Dialog.cy.tsx b/packages/react-components/react-dialog/src/components/Dialog/Dialog.cy.tsx index 9363bcece0a239..0bedc2e47b1846 100644 --- a/packages/react-components/react-dialog/src/components/Dialog/Dialog.cy.tsx +++ b/packages/react-components/react-dialog/src/components/Dialog/Dialog.cy.tsx @@ -484,7 +484,7 @@ describe('Dialog', () => { }); }); describe('modalType = alert', () => { - it('should not close with escape keydown', () => { + it('should close with escape keydown', () => { mount( @@ -512,7 +512,7 @@ describe('Dialog', () => { ); cy.get(dialogTriggerOpenSelector).realClick(); cy.focused().realType('{esc}'); - cy.get(dialogSurfaceSelector).should('exist'); + cy.get(dialogSurfaceSelector).should('not.exist'); }); it('should lock body scroll when dialog open', () => { mount( diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts index 3cc9418d841403..42b1fd7e487796 100644 --- a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts +++ b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts @@ -8,7 +8,7 @@ import { } from '@fluentui/react-utilities'; import type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types'; import { useDialogContext_unstable } from '../../contexts'; -import { isEscapeKeyDismiss } from '../../utils'; +import { Escape } from '@fluentui/keyboard-keys'; /** * Create the state required to render DialogSurface. @@ -47,7 +47,7 @@ export const useDialogSurface_unstable = ( const handleKeyDown = useEventCallback((event: React.KeyboardEvent) => { props.onKeyDown?.(event); - if (isEscapeKeyDismiss(event, modalType)) { + if (event.key === Escape && !event.isDefaultPrevented()) { requestOpenChange({ event, open: false, diff --git a/packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.tsx b/packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.tsx index d69fd85ace76d3..a7a461654a9489 100644 --- a/packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.tsx +++ b/packages/react-components/react-dialog/src/components/DialogTrigger/DialogTrigger.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useDialogTrigger_unstable } from './useDialogTrigger.styles'; +import { useDialogTrigger_unstable } from './useDialogTrigger'; import { renderDialogTrigger_unstable } from './renderDialogTrigger'; import type { DialogTriggerProps } from './DialogTrigger.types'; import type { FluentTriggerComponent } from '@fluentui/react-utilities'; diff --git a/packages/react-components/react-dialog/src/components/DialogTrigger/index.ts b/packages/react-components/react-dialog/src/components/DialogTrigger/index.ts index a6458850c55c0c..cefe8176cb56b8 100644 --- a/packages/react-components/react-dialog/src/components/DialogTrigger/index.ts +++ b/packages/react-components/react-dialog/src/components/DialogTrigger/index.ts @@ -1,4 +1,4 @@ export * from './DialogTrigger'; export * from './DialogTrigger.types'; export * from './renderDialogTrigger'; -export * from './useDialogTrigger.styles'; +export * from './useDialogTrigger'; diff --git a/packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.styles.ts b/packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts similarity index 100% rename from packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.styles.ts rename to packages/react-components/react-dialog/src/components/DialogTrigger/useDialogTrigger.ts diff --git a/packages/react-components/react-dialog/src/utils/index.ts b/packages/react-components/react-dialog/src/utils/index.ts index ed3d5165c8c5a9..c6617dcaef8a00 100644 --- a/packages/react-components/react-dialog/src/utils/index.ts +++ b/packages/react-components/react-dialog/src/utils/index.ts @@ -1,3 +1,2 @@ -export * from './isEscapeKeyDown'; export * from './useDisableBodyScroll'; export * from './useFocusFirstElement'; diff --git a/packages/react-components/react-dialog/src/utils/isEscapeKeyDown.ts b/packages/react-components/react-dialog/src/utils/isEscapeKeyDown.ts deleted file mode 100644 index 6acb06762e5e0e..00000000000000 --- a/packages/react-components/react-dialog/src/utils/isEscapeKeyDown.ts +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react'; -import { Escape } from '@fluentui/keyboard-keys'; -import type { DialogModalType } from '../components/Dialog/Dialog.types'; -import { DialogSurfaceElement } from '../DialogSurface'; - -/** - * Checks if keydown event is a proper Escape key dismiss - */ -export function isEscapeKeyDismiss( - event: React.KeyboardEvent, - modalType: DialogModalType, -): boolean { - return event.key === Escape && modalType !== 'alert' && !event.isDefaultPrevented(); -}