Escape key sanity (avoid event.stopPropagation) (#33630)

WordPress · Jul 22, 2021 · 5c0b338 · 5c0b338
1 parent 9ce693b
commit 5c0b338
Show file tree

Hide file tree

Showing 14 changed files with 47 additions and 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
@@ -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
@@ -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 = ( {
 					</NavigableMenu>
 					{ onSelectURL && (
 						// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-						<form
-							className="block-editor-media-flow__url-input"
-							onKeyDown={ ( event ) => {
-								if (
-									! [ TAB, ESCAPE ].includes( event.keyCode )
-								) {
-									event.stopPropagation();
-								}
-							} }
-							onKeyPress={ ( event ) => {
-								if (
-									! [ TAB, ESCAPE ].includes( event.keyCode )
-								) {
-									event.stopPropagation();
-								}
-							} }
-						>
+						<form className="block-editor-media-flow__url-input">
 							<span className="block-editor-media-replace-flow__image-url-label">
 								{ __( 'Current media URL:' ) }
 							</span>

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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 );
 		}
 	}