Fix onKeyDown and onKeyPress on the root component

WordPress · Jan 3, 2020 · db1d744 · db1d744
1 parent 7085e09
commit db1d744
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 45 deletions.
diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md
@@ -54,16 +54,6 @@ through of its function parameter.
 - Type: `Function`
 - Required: No
 
-### onKeyDown
-
-- Type: `Function`
-- Required: No
-
-### onKeyPress
-
-- Type: `Function`
-- Required: No
-
 ### onChange
 
 - Type: `Function`

diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
@@ -49,8 +49,6 @@ function LinkControl( {
 	instanceId,
 	onClose = noop,
 	onChangeMode = noop,
-	onKeyDown = noop,
-	onKeyPress = noop,
 	onChange = noop,
 } ) {
 	// State
@@ -233,8 +231,6 @@ function LinkControl( {
 							renderSuggestions={ renderSearchResults }
 							fetchSuggestions={ getSearchHandler }
 							onReset={ resetInput }
-							onKeyDown={ onKeyDown }
-							onKeyPress={ onKeyPress }
 						/>
 					) }
 

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,22 +4,39 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-import { ENTER } from '@wordpress/keycodes';
+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 ) => {
+	event.stopPropagation();
+};
+
 const LinkControlSearchInput = ( {
 	value,
 	onChange,
 	onSelect,
 	renderSuggestions,
 	fetchSuggestions,
 	onReset,
-	onKeyDown,
-	onKeyPress,
 } ) => {
 	const selectItemHandler = ( selection, suggestion ) => {
 		onChange( selection );
@@ -44,9 +61,9 @@ const LinkControlSearchInput = ( {
 					if ( event.keyCode === ENTER ) {
 						return;
 					}
-					onKeyDown( event );
+					handleLinkControlOnKeyDown( event );
 				} }
-				onKeyPress={ onKeyPress }
+				onKeyPress={ handleLinkControlOnKeyPress }
 				placeholder={ __( 'Search or type url' ) }
 				__experimentalRenderSuggestions={ renderSuggestions }
 				__experimentalFetchLinkSuggestions={ fetchSuggestions }

diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -23,12 +23,6 @@ import {
 	ToolbarGroup,
 } from '@wordpress/components';
 import {
-	LEFT,
-	RIGHT,
-	UP,
-	DOWN,
-	BACKSPACE,
-	ENTER,
 	rawShortcut,
 	displayShortcut,
 } from '@wordpress/keycodes';
@@ -68,24 +62,6 @@ function NavigationLinkEdit( {
 		}
 	}, [ isSelected ] );
 
-	/**
-	 * `onKeyDown` LinkControl handler.
-	 * It takes over to stop the event propagation to make the
-	 * navigation work, avoiding undesired behaviors.
-	 * For instance, it will block to move between link blocks
-	 * when the LinkControl is focused.
-	 *
-	 * @param {Event} event
-	 */
-	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 itemLabelPlaceholder = __( 'Add link…' );
 
 	return (
@@ -174,8 +150,6 @@ function NavigationLinkEdit( {
 					{ isLinkOpen && (
 						<LinkControl
 							className="wp-block-navigation-link__inline-link-input"
-							onKeyDown={ handleLinkControlOnKeyDown }
-							onKeyPress={ ( event ) => event.stopPropagation() }
 							value={ link }
 							onChange={ ( {
 								title: newTitle = '',