diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js index d1c830fe067e5..a14852d8edfdc 100644 --- a/packages/block-library/src/navigation-menu-item/edit.js +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -23,6 +23,7 @@ import { DOWN, BACKSPACE, ENTER, + ESCAPE, } from '@wordpress/keycodes'; import { __ } from '@wordpress/i18n'; import { @@ -51,14 +52,20 @@ function NavigationMenuItemEdit( { const inputValue = urlInput !== null ? urlInput : url; - const onKeyDown = ( event ) => { - if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( event.keyCode ) > -1 ) { + 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(); } + + if ( ESCAPE === keyCode ) { + closeLinkControl (); + } }; - const closeURLPopover = () => { + const closeLinkControl = () => { setIsEditingLink( false ); setUrlInput( null ); setIsLinkOpen( false ); @@ -71,7 +78,7 @@ function NavigationMenuItemEdit( { if ( autocompleteElement && autocompleteElement.contains( event.target ) ) { return; } - closeURLPopover(); + closeLinkControl (); }; const { label, url } = attributes; @@ -108,7 +115,7 @@ function NavigationMenuItemEdit( { { isLinkOpen && { event.stopPropagation() } } /> }