From 5c0b338c44296688edac9945b23dbd18869b11cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <4710635+ellatrix@users.noreply.github.com> Date: Thu, 22 Jul 2021 18:00:19 +0300 Subject: [PATCH] Escape key sanity (avoid event.stopPropagation) (#33630) --- .../block-tools/block-selection-button.js | 3 ++- .../components/media-replace-flow/index.js | 20 ++----------------- .../rich-text/use-undo-automatic-change.js | 4 ++++ .../components/writing-flow/use-tab-nav.js | 5 ++++- packages/components/src/autocomplete/index.js | 4 ++++ .../components/src/combobox-control/index.js | 5 ++++- .../components/src/form-token-field/index.js | 5 ++++- packages/components/src/modal/frame.js | 8 ++++++-- .../src/navigation/menu/menu-title-search.js | 4 ++-- .../compose/src/hooks/use-dialog/index.js | 8 ++++++-- .../src/controls/inserter-outer-section.js | 6 ++++-- .../secondary-sidebar/list-view-sidebar.js | 4 ++-- .../navigation-panel/index.js | 4 ++-- .../secondary-sidebar/list-view-sidebar.js | 3 +-- 14 files changed, 47 insertions(+), 36 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js index 4ae00b6f4610ff..3a091a40185202 100644 --- a/packages/block-editor/src/components/block-tools/block-selection-button.js +++ b/packages/block-editor/src/components/block-tools/block-selection-button.js @@ -166,8 +166,9 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) { } const startingBlockClientId = hasBlockMovingClientId(); - if ( isEscape && startingBlockClientId ) { + if ( isEscape && startingBlockClientId && ! event.defaultPrevented ) { setBlockMovingClientId( null ); + event.preventDefault(); } if ( ( isEnter || isSpace ) && startingBlockClientId ) { const sourceRoot = getBlockRootClientId( startingBlockClientId ); diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js index b96ea2f4bae3db..da419d038ee5bb 100644 --- a/packages/block-editor/src/components/media-replace-flow/index.js +++ b/packages/block-editor/src/components/media-replace-flow/index.js @@ -18,7 +18,7 @@ import { withFilters, } from '@wordpress/components'; import { withDispatch, useSelect } from '@wordpress/data'; -import { DOWN, TAB, ESCAPE } from '@wordpress/keycodes'; +import { DOWN } from '@wordpress/keycodes'; import { compose } from '@wordpress/compose'; import { upload, media as mediaIcon } from '@wordpress/icons'; import { store as noticesStore } from '@wordpress/notices'; @@ -164,23 +164,7 @@ const MediaReplaceFlow = ( { { onSelectURL && ( // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -
{ - if ( - ! [ TAB, ESCAPE ].includes( event.keyCode ) - ) { - event.stopPropagation(); - } - } } - onKeyPress={ ( event ) => { - if ( - ! [ TAB, ESCAPE ].includes( event.keyCode ) - ) { - event.stopPropagation(); - } - } } - > + { __( 'Current media URL:' ) } diff --git a/packages/block-editor/src/components/rich-text/use-undo-automatic-change.js b/packages/block-editor/src/components/rich-text/use-undo-automatic-change.js index e3c22c1d031624..890746cec74a35 100644 --- a/packages/block-editor/src/components/rich-text/use-undo-automatic-change.js +++ b/packages/block-editor/src/components/rich-text/use-undo-automatic-change.js @@ -16,6 +16,10 @@ export function useUndoAutomaticChange() { function onKeyDown( event ) { const { keyCode } = event; + if ( event.defaultPrevented ) { + return; + } + if ( keyCode !== DELETE && keyCode !== BACKSPACE && diff --git a/packages/block-editor/src/components/writing-flow/use-tab-nav.js b/packages/block-editor/src/components/writing-flow/use-tab-nav.js index 880b395288be80..96a6d522b46294 100644 --- a/packages/block-editor/src/components/writing-flow/use-tab-nav.js +++ b/packages/block-editor/src/components/writing-flow/use-tab-nav.js @@ -82,8 +82,11 @@ export default function useTabNav() { const ref = useRefEffect( ( node ) => { function onKeyDown( event ) { + if ( event.defaultPrevented ) { + return; + } + if ( event.keyCode === ESCAPE && ! hasMultiSelection() ) { - event.stopPropagation(); event.preventDefault(); setNavigationMode( true ); return; diff --git a/packages/components/src/autocomplete/index.js b/packages/components/src/autocomplete/index.js index 65852d4072936b..cd20bb73583c63 100644 --- a/packages/components/src/autocomplete/index.js +++ b/packages/components/src/autocomplete/index.js @@ -226,6 +226,9 @@ function useAutocomplete( { if ( filteredOptions.length === 0 ) { return; } + if ( event.defaultPrevented ) { + return; + } switch ( event.keyCode ) { case UP: setSelectedIndex( @@ -244,6 +247,7 @@ function useAutocomplete( { case ESCAPE: setAutocompleter( null ); setAutocompleterUI( null ); + event.preventDefault(); break; case ENTER: diff --git a/packages/components/src/combobox-control/index.js b/packages/components/src/combobox-control/index.js index e78ad7d8e4524a..a1909f0a62c7bb 100644 --- a/packages/components/src/combobox-control/index.js +++ b/packages/components/src/combobox-control/index.js @@ -104,6 +104,10 @@ function ComboboxControl( { const onKeyDown = ( event ) => { let preventDefault = false; + if ( event.defaultPrevented ) { + return; + } + switch ( event.keyCode ) { case ENTER: if ( selectedSuggestion ) { @@ -123,7 +127,6 @@ function ComboboxControl( { setIsExpanded( false ); setSelectedSuggestion( null ); preventDefault = true; - event.stopPropagation(); break; default: break; diff --git a/packages/components/src/form-token-field/index.js b/packages/components/src/form-token-field/index.js index 1797a68a464aff..a7bcb39ecd4570 100644 --- a/packages/components/src/form-token-field/index.js +++ b/packages/components/src/form-token-field/index.js @@ -141,6 +141,10 @@ class FormTokenField extends Component { onKeyDown( event ) { let preventDefault = false; + if ( event.defaultPrevented ) { + return; + } + switch ( event.keyCode ) { case BACKSPACE: preventDefault = this.handleDeleteKey( @@ -174,7 +178,6 @@ class FormTokenField extends Component { break; case ESCAPE: preventDefault = this.handleEscapeKey( event ); - event.stopPropagation(); break; default: break; diff --git a/packages/components/src/modal/frame.js b/packages/components/src/modal/frame.js index c1cbfd2d79a0b5..b563dff76c2559 100644 --- a/packages/components/src/modal/frame.js +++ b/packages/components/src/modal/frame.js @@ -34,8 +34,12 @@ function ModalFrameContent( { onRequestClose, } ) { function handleEscapeKeyDown( event ) { - if ( shouldCloseOnEsc && event.keyCode === ESCAPE ) { - event.stopPropagation(); + if ( + shouldCloseOnEsc && + event.keyCode === ESCAPE && + ! event.defaultPrevented + ) { + event.preventDefault(); if ( onRequestClose ) { onRequestClose( event ); } diff --git a/packages/components/src/navigation/menu/menu-title-search.js b/packages/components/src/navigation/menu/menu-title-search.js index dec922098bf87d..ee6a2981648151 100644 --- a/packages/components/src/navigation/menu/menu-title-search.js +++ b/packages/components/src/navigation/menu/menu-title-search.js @@ -67,8 +67,8 @@ function MenuTitleSearch( { }; function onKeyDown( event ) { - if ( event.keyCode === ESCAPE ) { - event.stopPropagation(); + if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) { + event.preventDefault(); onClose(); } } diff --git a/packages/compose/src/hooks/use-dialog/index.js b/packages/compose/src/hooks/use-dialog/index.js index d022c873773cf4..24e532230d76a7 100644 --- a/packages/compose/src/hooks/use-dialog/index.js +++ b/packages/compose/src/hooks/use-dialog/index.js @@ -61,8 +61,12 @@ function useDialog( options ) { /** @type {KeyboardEvent} */ event ) => { // Close on escape - if ( event.keyCode === ESCAPE && currentOptions.current?.onClose ) { - event.stopPropagation(); + if ( + event.keyCode === ESCAPE && + ! event.defaultPrevented && + currentOptions.current?.onClose + ) { + event.preventDefault(); currentOptions.current.onClose(); } } ); diff --git a/packages/customize-widgets/src/controls/inserter-outer-section.js b/packages/customize-widgets/src/controls/inserter-outer-section.js index 7091a695578e99..d668d0c0cb8573 100644 --- a/packages/customize-widgets/src/controls/inserter-outer-section.js +++ b/packages/customize-widgets/src/controls/inserter-outer-section.js @@ -53,10 +53,12 @@ export default function getInserterOuterSection() { ( event ) => { if ( this.isOpen && - ( event.keyCode === ESCAPE || event.code === 'Escape' ) + ( event.keyCode === ESCAPE || + event.code === 'Escape' ) && + ! event.defaultPrevented ) { + event.preventDefault(); event.stopPropagation(); - this.close(); } }, diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js index 4c11546163de79..617a22f9b76326 100644 --- a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js +++ b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js @@ -34,8 +34,8 @@ export default function ListViewSidebar() { const focusOnMountRef = useFocusOnMount( 'firstElement' ); const focusReturnRef = useFocusReturn(); function closeOnEscape( event ) { - if ( event.keyCode === ESCAPE ) { - event.stopPropagation(); + if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) { + event.preventDefault(); setIsListViewOpened( false ); } } diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js index 29bd86d2e365e5..b601bac80c185b 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js @@ -77,8 +77,8 @@ const NavigationPanel = ( { isOpen } ) => { }, [ activeMenu, isOpen ] ); const closeOnEscape = ( event ) => { - if ( event.keyCode === ESCAPE ) { - event.stopPropagation(); + if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) { + event.preventDefault(); setIsNavigationPanelOpened( false ); } }; diff --git a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js index 86991c74acf974..469dabaff56198 100644 --- a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js +++ b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js @@ -34,8 +34,7 @@ export default function ListViewSidebar() { const focusOnMountRef = useFocusOnMount( 'firstElement' ); const focusReturnRef = useFocusReturn(); function closeOnEscape( event ) { - if ( event.keyCode === ESCAPE ) { - event.stopPropagation(); + if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) { setIsListViewOpened( false ); } }