Components: Remove redundant stopPropagation for WritingFlow, Observe…

…Typing Originally necessary to avoid events being interprted by ObserveTyping, WritingFlow. These components now explicitly consider whether the event occurred in the same DOM hierarchy, where the elements rendered here would presumably be rendered outside (Popover, Slot/Fill, etc).
WordPress · Jan 24, 2020 · 4994912 · 4994912
1 parent 629b7d2
commit 4994912
Show file tree

Hide file tree

Showing 7 changed files with 3 additions and 130 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -39,7 +39,6 @@ import {
 } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { withInstanceId, compose, withSafeTimeout } from '@wordpress/compose';
-import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
@@ -54,8 +53,6 @@ import { searchItems } from './search-items';
 
 const MAX_SUGGESTED_ITEMS = 9;
 
-const stopKeyPropagation = ( event ) => event.stopPropagation();
-
 const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 
 export class InserterMenu extends Component {
@@ -220,13 +217,6 @@ export class InserterMenu extends Component {
 		debouncedSpeak( resultsFoundMessage );
 	}
 
-	onKeyDown( event ) {
-		if ( includes( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ], event.keyCode ) ) {
-			// Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
-			event.stopPropagation();
-		}
-	}
-
 	render() {
 		const { categories, collections, instanceId, onSelect, rootClientId, showInserterHelpPanel } = this.props;
 		const {
@@ -247,16 +237,12 @@ export class InserterMenu extends Component {
 		// Disable reason (no-autofocus): The inserter menu is a modal display, not one which
 		// is always visible, and one which already incurs this behavior of autoFocus via
 		// Popover's focusOnMount.
-		// 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-autofocus, jsx-a11y/no-static-element-interactions */
+		/* eslint-disable jsx-a11y/no-autofocus */
 		return (
 			<div
 				className={ classnames( 'block-editor-inserter__menu', {
 					'has-help-panel': hasHelpPanel,
 				} ) }
-				onKeyPress={ stopKeyPropagation }
-				onKeyDown={ this.onKeyDown }
 			>
 				<div className="block-editor-inserter__main-area">
 					<label htmlFor={ `block-editor-inserter__search-${ instanceId }` } className="screen-reader-text">
@@ -438,7 +424,7 @@ export class InserterMenu extends Component {
 				) }
 			</div>
 		);
-		/* eslint-enable jsx-a11y/no-autofocus, jsx-a11y/no-static-element-interactions */
+		/* eslint-enable jsx-a11y/no-autofocus */
 	}
 }
 

diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js
@@ -4,38 +4,12 @@
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-import { LEFT,
-	RIGHT,
-	UP,
-	DOWN,
-	BACKSPACE,
-	ENTER,
-} from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import { URLInput } from '../';
 
-const handleLinkControlOnKeyDown = ( event ) => {
-	const { keyCode } = event;
-
-	if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( keyCode ) > -1 ) {
-		// Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
-		event.stopPropagation();
-	}
-};
-
-const handleLinkControlOnKeyPress = ( event ) => {
-	const { keyCode } = event;
-
-	event.stopPropagation();
-
-	if ( keyCode === ENTER ) {
-
-	}
-};
-
 const LinkControlSearchInput = ( {
 	value,
 	onChange,
@@ -67,13 +41,6 @@ const LinkControlSearchInput = ( {
 				className="block-editor-link-control__search-input"
 				value={ value }
 				onChange={ selectItemHandler }
-				onKeyDown={ ( event ) => {
-					if ( event.keyCode === ENTER ) {
-						return;
-					}
-					handleLinkControlOnKeyDown( event );
-				} }
-				onKeyPress={ handleLinkControlOnKeyPress }
 				placeholder={ __( 'Search or type url' ) }
 				__experimentalRenderSuggestions={ renderSuggestions }
 				__experimentalFetchLinkSuggestions={ fetchSuggestions }

diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -13,14 +13,7 @@ import {
 	Dropdown,
 	withNotices,
 } from '@wordpress/components';
-import {
-	LEFT,
-	RIGHT,
-	UP,
-	DOWN,
-	BACKSPACE,
-	ENTER,
-} from '@wordpress/keycodes';
+import { DOWN } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
@@ -51,17 +44,6 @@ const MediaReplaceFlow = (
 	}, [] );
 	const editMediaButtonRef = createRef();
 
-	const stopPropagation = ( event ) => {
-		event.stopPropagation();
-	};
-
-	const stopPropagationRelevantKeys = ( event ) => {
-		if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( event.keyCode ) > -1 ) {
-			// Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
-			event.stopPropagation();
-		}
-	};
-
 	const selectMedia = ( media ) => {
 		onSelect( media );
 		setMediaURLValue( media.url );
@@ -99,8 +81,6 @@ const MediaReplaceFlow = (
 	if ( showEditURLInput ) {
 		urlInputUIContent = (
 			<LinkEditor
-				onKeyDown={ stopPropagationRelevantKeys }
-				onKeyPress={ stopPropagation }
 				value={ mediaURLValue }
 				isFullWidthInput={ true }
 				hasInputBorder={ true }

diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js
@@ -15,12 +15,6 @@ import { BaseControl, Button, Spinner, withSpokenMessages, Popover } from '@word
 import { withInstanceId, withSafeTimeout, compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 import { isURL } from '@wordpress/url';
-
-// Since URLInput is rendered in the context of other inputs, but should be
-// considered a separate modal node, prevent keyboard events from propagating
-// as being considered from the input.
-const stopEventPropagation = ( event ) => event.stopPropagation();
-
 class URLInput extends Component {
 	constructor( props ) {
 		super( props );
@@ -346,7 +340,6 @@ class URLInput extends Component {
 					required
 					value={ value }
 					onChange={ this.onChange }
-					onInput={ stopEventPropagation }
 					placeholder={ placeholder }
 					onKeyDown={ this.onKeyDown }
 					role="combobox"

diff --git a/packages/block-editor/src/components/url-popover/image-url-input-ui.js b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
@@ -17,14 +17,6 @@ import {
 	SVG,
 	Path,
 } from '@wordpress/components';
-import {
-	LEFT,
-	RIGHT,
-	UP,
-	DOWN,
-	BACKSPACE,
-	ENTER,
-} from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -60,17 +52,6 @@ const ImageURLInputUI = ( {
 
 	const autocompleteRef = useRef( null );
 
-	const stopPropagation = ( event ) => {
-		event.stopPropagation();
-	};
-
-	const stopPropagationRelevantKeys = ( event ) => {
-		if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( event.keyCode ) > -1 ) {
-			// Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
-			event.stopPropagation();
-		}
-	};
-
 	const startEditLink = useCallback( () => {
 		if ( linkDestination === LINK_DESTINATION_MEDIA ||
 			linkDestination === LINK_DESTINATION_ATTACHMENT
@@ -223,14 +204,10 @@ const ImageURLInputUI = ( {
 				label={ __( 'Link Rel' ) }
 				value={ removeNewTabRel( rel ) || '' }
 				onChange={ onSetLinkRel }
-				onKeyPress={ stopPropagation }
-				onKeyDown={ stopPropagationRelevantKeys }
 			/>
 			<TextControl
 				label={ __( 'Link CSS Class' ) }
 				value={ linkClass || '' }
-				onKeyPress={ stopPropagation }
-				onKeyDown={ stopPropagationRelevantKeys }
 				onChange={ onSetLinkClass }
 			/>
 		</>
@@ -279,8 +256,6 @@ const ImageURLInputUI = ( {
 							className="block-editor-format-toolbar__link-container-content"
 							value={ linkEditorValue }
 							onChangeInputValue={ setUrlInput }
-							onKeyDown={ stopPropagationRelevantKeys }
-							onKeyPress={ stopPropagation }
 							onSubmit={ onSubmitLinkChange() }
 							autocompleteRef={ autocompleteRef }
 						/>
@@ -289,7 +264,6 @@ const ImageURLInputUI = ( {
 						<>
 							<URLPopover.LinkViewer
 								className="block-editor-format-toolbar__link-container-content"
-								onKeyPress={ stopPropagation }
 								url={ url }
 								onEditLinkClick={ startEditLink }
 								urlLabel={ urlLabel }

diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js
@@ -6,15 +6,12 @@ import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { insertObject } from '@wordpress/rich-text';
 import { MediaUpload, RichTextToolbarButton, MediaUploadCheck } from '@wordpress/block-editor';
-import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 const name = 'core/image';
 const title = __( 'Inline image' );
 
-const stopKeyPropagation = ( event ) => event.stopPropagation();
-
 function getRange() {
 	const selection = window.getSelection();
 	return selection.rangeCount ? selection.getRangeAt( 0 ) : null;
@@ -37,7 +34,6 @@ export const image = {
 		constructor() {
 			super( ...arguments );
 			this.onChange = this.onChange.bind( this );
-			this.onKeyDown = this.onKeyDown.bind( this );
 			this.openModal = this.openModal.bind( this );
 			this.closeModal = this.closeModal.bind( this );
 			this.state = {
@@ -69,13 +65,6 @@ export const image = {
 			this.setState( { width } );
 		}
 
-		onKeyDown( event ) {
-			if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( event.keyCode ) > -1 ) {
-				// Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
-				event.stopPropagation();
-			}
-		}
-
 		openModal() {
 			this.setState( { modal: true } );
 		}
@@ -126,8 +115,6 @@ export const image = {
 							/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ }
 							<form
 								className="block-editor-format-toolbar__image-container-content"
-								onKeyPress={ stopKeyPropagation }
-								onKeyDown={ this.onKeyDown }
 								onSubmit={ ( event ) => {
 									const newReplacements = value.replacements.slice();
 

diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js
@@ -7,7 +7,6 @@ import {
 	ToggleControl,
 	withSpokenMessages,
 } from '@wordpress/components';
-import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
 import { prependHTTP } from '@wordpress/url';
 import {
 	create,
@@ -24,8 +23,6 @@ import { URLPopover } from '@wordpress/block-editor';
  */
 import { createLinkFormat, isValidHref } from './utils';
 
-const stopKeyPropagation = ( event ) => event.stopPropagation();
-
 function isShowingInput( props, state ) {
 	return props.addingLink || state.editLink;
 }
@@ -69,7 +66,6 @@ class InlineLinkUI extends Component {
 
 		this.editLink = this.editLink.bind( this );
 		this.submitLink = this.submitLink.bind( this );
-		this.onKeyDown = this.onKeyDown.bind( this );
 		this.onChangeInputValue = this.onChangeInputValue.bind( this );
 		this.setLinkTarget = this.setLinkTarget.bind( this );
 		this.onFocusOutside = this.onFocusOutside.bind( this );
@@ -101,13 +97,6 @@ class InlineLinkUI extends Component {
 		return null;
 	}
 
-	onKeyDown( event ) {
-		if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( event.keyCode ) > -1 ) {
-			// Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
-			event.stopPropagation();
-		}
-	}
-
 	onChangeInputValue( inputValue ) {
 		this.setState( { inputValue } );
 	}
@@ -216,15 +205,12 @@ class InlineLinkUI extends Component {
 						className="block-editor-format-toolbar__link-container-content"
 						value={ inputValue }
 						onChangeInputValue={ this.onChangeInputValue }
-						onKeyDown={ this.onKeyDown }
-						onKeyPress={ stopKeyPropagation }
 						onSubmit={ this.submitLink }
 						autocompleteRef={ this.autocompleteRef }
 					/>
 				) : (
 					<URLPopover.LinkViewer
 						className="block-editor-format-toolbar__link-container-content"
-						onKeyPress={ stopKeyPropagation }
 						url={ url }
 						onEditLinkClick={ this.editLink }
 						linkClassName={ isValidHref( prependHTTP( url ) ) ? undefined : 'has-invalid-link' }