Allow returning to input on selectTree when pressing escape (#49106)

* Allow returning to input on selectTree when pressing escape

* Call onEscape in single mode as well

* Close the menu on escape

* Extract handleEscapePress function

packages/js/components/changelog/update-escape-select-control

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Allow returning to input on selectTree when pressing escape

packages/js/components/src/experimental-select-tree-control/select-tree-menu.tsx

@@ -42,6 +42,7 @@ export const SelectTreeMenu = ( {
 	items,
 	treeRef: ref,
 	onClose = () => {},
+	onEscape,
 	shouldShowCreateButton,
 	...props
 }: MenuProps ) => {
@@ -135,6 +136,7 @@ export const SelectTreeMenu = ( {
 									shouldShowCreateButton={
 										shouldShowCreateButton
 									}
+									onEscape={ onEscape }
 									style={ {
 										width: boundingRect?.width,
 									} }

packages/js/components/src/experimental-select-tree-control/select-tree.tsx

@@ -245,6 +245,10 @@ export const SelectTree = function SelectTree( {
 				isOpen={ isOpen }
 				items={ linkedTree }
 				shouldShowCreateButton={ shouldShowCreateButton }
+				onEscape={ () => {
+					focusOnInput();
+					setIsOpen( false );
+				} }
 				onClose={ () => {
 					setIsOpen( false );
 				} }

packages/js/components/src/experimental-tree-control/tree-item.tsx

@@ -33,6 +33,15 @@ export const TreeItem = forwardRef( function ForwardedTreeItem(
 		ref,
 	} );
 
+	function handleEscapePress(
+		event: React.KeyboardEvent< HTMLInputElement >
+	) {
+		if ( event.key === 'Escape' && props.onEscape ) {
+			event.preventDefault();
+			props.onEscape();
+		}
+	}
+
 	return (
 		<li
 			{ ...treeItemProps }
@@ -58,6 +67,7 @@ export const TreeItem = forwardRef( function ForwardedTreeItem(
 							}
 							checked={ selection.checkedStatus === 'checked' }
 							onChange={ selection.onSelectChild }
+							onKeyDown={ handleEscapePress }
 							// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 							// @ts-ignore __nextHasNoMarginBottom is a valid prop
 							__nextHasNoMarginBottom={ true }
@@ -70,6 +80,7 @@ export const TreeItem = forwardRef( function ForwardedTreeItem(
 							onChange={ ( event ) =>
 								selection.onSelectChild( event.target.checked )
 							}
+							onKeyDown={ handleEscapePress }
 						/>
 					) }
 

packages/js/components/src/experimental-tree-control/tree.tsx

@@ -59,6 +59,7 @@ export const Tree = forwardRef( function ForwardedTree(
 										) as HTMLButtonElement
 								 )?.focus();
 							} }
+							onEscape={ props.onEscape }
 						/>
 					) ) }
 				</ol>
@@ -94,6 +95,9 @@ export const Tree = forwardRef( function ForwardedTree(
 									)
 									?.focus();
 							}
+						} else if ( event.key === 'Escape' && props.onEscape ) {
+							event.preventDefault();
+							props.onEscape();
 						}
 					} }
 				>

packages/js/components/src/experimental-tree-control/types.ts

@@ -76,6 +76,10 @@ type BaseTreeProps = {
 	 * Called when the create button is clicked to help closing any related popover.
 	 */
 	onTreeBlur?(): void;
+	/**
+	 * Called when the escape key is pressed.
+	 */
+	onEscape?(): void;
 };
 
 export type TreeProps = BaseTreeProps &

pnpm-lock.yaml

@@ -21630,7 +21630,7 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
     peerDependencies:
-      react: ^17.0.2
+      react: 18.2.0
 
   react-number-format@4.9.3:
     resolution: {integrity: sha512-am1A1xYAbENuKJ+zpM7V+B1oRTSeOHYltqVKExznIVFweBzhLmOBmyb1DfIKjHo90E0bo1p3nzVJ2NgS5xh+sQ==}