Remove event.stopPropagation for past WritingFlow/ObserveTyping compa…

…tibility (#33632)
WordPress · Jul 23, 2021 · 3052286 · 3052286
1 parent 295942b
commit 3052286
Show file tree

Hide file tree

Showing 15 changed files with 3 additions and 39 deletions.
diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/index.js b/packages/block-editor/src/components/block-alignment-matrix-control/index.js
@@ -35,7 +35,6 @@ function BlockAlignmentMatrixControl( props ) {
 				const openOnArrowDown = ( event ) => {
 					if ( ! isOpen && event.keyCode === DOWN ) {
 						event.preventDefault();
-						event.stopPropagation();
 						onToggle();
 					}
 				};

diff --git a/packages/block-editor/src/components/block-switcher/test/index.js b/packages/block-editor/src/components/block-switcher/test/index.js
@@ -176,7 +176,6 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 			const onToggleStub = jest.fn();
 			const mockKeyDown = {
 				preventDefault: () => {},
-				stopPropagation: () => {},
 				keyCode: DOWN,
 			};
 

diff --git a/packages/block-editor/src/components/color-style-selector/index.js b/packages/block-editor/src/components/color-style-selector/index.js
@@ -55,7 +55,6 @@ const renderToggleComponent = ( { TextColor, BackgroundColor } ) => ( {
 	const openOnArrowDown = ( event ) => {
 		if ( ! isOpen && event.keyCode === DOWN ) {
 			event.preventDefault();
-			event.stopPropagation();
 			onToggle();
 		}
 	};

diff --git a/packages/block-editor/src/components/duotone-control/index.js b/packages/block-editor/src/components/duotone-control/index.js
@@ -28,7 +28,6 @@ function DuotoneControl( {
 	const openOnArrowDown = ( event ) => {
 		if ( ! isOpen && event.keyCode === DOWN ) {
 			event.preventDefault();
-			event.stopPropagation();
 			onToggle();
 		}
 	};

diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
@@ -317,8 +317,7 @@ export function MediaPlaceholder( {
 					return (
 						<Button
 							variant="tertiary"
-							onClick={ ( event ) => {
-								event.stopPropagation();
+							onClick={ () => {
 								open();
 							} }
 						>

diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -104,7 +104,6 @@ const MediaReplaceFlow = ( {
 	const openOnArrowDown = ( event ) => {
 		if ( event.keyCode === DOWN ) {
 			event.preventDefault();
-			event.stopPropagation();
 			event.target.click();
 		}
 	};

diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js
@@ -261,7 +261,6 @@ class URLInput extends Component {
 				// position.
 				case UP: {
 					if ( 0 !== event.target.selectionStart ) {
-						event.stopPropagation();
 						event.preventDefault();
 
 						// Set the input caret to position 0
@@ -275,7 +274,6 @@ class URLInput extends Component {
 					if (
 						this.props.value.length !== event.target.selectionStart
 					) {
-						event.stopPropagation();
 						event.preventDefault();
 
 						// Set the input caret to the last position
@@ -306,7 +304,6 @@ class URLInput extends Component {
 
 		switch ( event.keyCode ) {
 			case UP: {
-				event.stopPropagation();
 				event.preventDefault();
 				const previousIndex = ! selectedSuggestion
 					? suggestions.length - 1
@@ -317,7 +314,6 @@ class URLInput extends Component {
 				break;
 			}
 			case DOWN: {
-				event.stopPropagation();
 				event.preventDefault();
 				const nextIndex =
 					selectedSuggestion === null ||
@@ -339,7 +335,6 @@ class URLInput extends Component {
 			}
 			case ENTER: {
 				if ( this.state.selectedSuggestion !== null ) {
-					event.stopPropagation();
 					this.selectLink( suggestion );
 
 					if ( this.props.onSubmit ) {

diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
@@ -72,7 +72,6 @@ class GalleryImage extends Component {
 			this.props.isSelected &&
 			[ BACKSPACE, DELETE ].indexOf( event.keyCode ) !== -1
 		) {
-			event.stopPropagation();
 			event.preventDefault();
 			this.props.onRemove();
 		}

diff --git a/packages/block-library/src/heading/heading-level-dropdown.js b/packages/block-library/src/heading/heading-level-dropdown.js
@@ -49,7 +49,6 @@ export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
 				const openOnArrowDown = ( event ) => {
 					if ( ! isOpen && event.keyCode === DOWN ) {
 						event.preventDefault();
-						event.stopPropagation();
 						onToggle();
 					}
 				};

diff --git a/packages/block-library/src/template-part/edit/selection/index.js b/packages/block-library/src/template-part/edit/selection/index.js
@@ -3,25 +3,12 @@
  */
 import { SearchControl } from '@wordpress/components';
 import { useState } from '@wordpress/element';
-import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
+
 /**
  * Internal dependencies
  */
 import TemplatePartPreviews from './template-part-previews';
 
-const preventArrowKeysPropagation = ( event ) => {
-	if (
-		[ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].includes( event.keyCode )
-	) {
-		// Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
-		event.stopPropagation();
-	}
-};
-const stopKeyPropagation = ( event ) => event.stopPropagation();
-
-// Disable reason (no-static-element-interactions): Navigational key-presses within
-// the menu are prevented from triggering WritingFlow and ObserveTyping interactions.
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 export default function TemplatePartSelection( {
 	setAttributes,
 	onClose,
@@ -30,10 +17,7 @@ export default function TemplatePartSelection( {
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	return (
-		<div
-			onKeyPress={ stopKeyPropagation }
-			onKeyDown={ preventArrowKeysPropagation }
-		>
+		<div>
 			<SearchControl
 				value={ filterValue }
 				onChange={ setFilterValue }
@@ -51,4 +35,3 @@ export default function TemplatePartSelection( {
 		</div>
 	);
 }
-/* eslint-enable jsx-a11y/no-static-element-interactions */
diff --git a/packages/components/src/autocomplete/index.js b/packages/components/src/autocomplete/index.js
@@ -266,7 +266,6 @@ function useAutocomplete( {
 		// Any handled keycode should prevent original behavior. This relies on
 		// the early return in the default case.
 		event.preventDefault();
-		event.stopPropagation();
 	}
 
 	let textContent;

diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js
@@ -96,7 +96,6 @@ function DropdownMenu( {
 
 					if ( ! isOpen && event.keyCode === DOWN ) {
 						event.preventDefault();
-						event.stopPropagation();
 						onToggle();
 					}
 				};

diff --git a/packages/components/src/dropdown-menu/index.native.js b/packages/components/src/dropdown-menu/index.native.js
@@ -89,7 +89,6 @@ function DropdownMenu( {
 				const openOnArrowDown = ( event ) => {
 					if ( ! isOpen && event.keyCode === DOWN ) {
 						event.preventDefault();
-						event.stopPropagation();
 						onToggle();
 					}
 				};

diff --git a/packages/components/src/dropdown-menu/test/index.js b/packages/components/src/dropdown-menu/test/index.js
@@ -73,7 +73,6 @@ describe( 'DropdownMenu', () => {
 			button.focus();
 			fireEvent.keyDown( button, {
 				keyCode: DOWN,
-				stopPropagation: () => {},
 				preventDefault: () => {},
 			} );
 			const menu = getNavigableMenu( dropdownMenuContainer );
@@ -95,7 +94,6 @@ describe( 'DropdownMenu', () => {
 			button.focus();
 			fireEvent.keyDown( button, {
 				keyCode: DOWN,
-				stopPropagation: () => {},
 				preventDefault: () => {},
 			} );
 

diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js
@@ -351,7 +351,6 @@ export class RichText extends Component {
 		// Add stubs for conformance in downstream autocompleters logic
 		this.customEditableOnKeyDown?.( {
 			preventDefault: () => undefined,
-			stopPropagation: () => undefined,
 			...event,
 		} );