From 96739fd6fd79e20dac36b2e1cd27089380fd1268 Mon Sep 17 00:00:00 2001
From: Nathan Silveira <nsschneider1@gmail.com>
Date: Thu, 4 Jul 2024 11:00:32 -0300
Subject: [PATCH] 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
---
 .../components/changelog/update-escape-select-control |  4 ++++
 .../select-tree-menu.tsx                              |  2 ++
 .../experimental-select-tree-control/select-tree.tsx  |  4 ++++
 .../src/experimental-tree-control/tree-item.tsx       | 11 +++++++++++
 .../components/src/experimental-tree-control/tree.tsx |  4 ++++
 .../components/src/experimental-tree-control/types.ts |  4 ++++
 pnpm-lock.yaml                                        |  2 +-
 7 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 packages/js/components/changelog/update-escape-select-control

diff --git a/packages/js/components/changelog/update-escape-select-control b/packages/js/components/changelog/update-escape-select-control
new file mode 100644
index 00000000000..c58082f17fb
--- /dev/null
+++ b/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
diff --git a/packages/js/components/src/experimental-select-tree-control/select-tree-menu.tsx b/packages/js/components/src/experimental-select-tree-control/select-tree-menu.tsx
index 77619cfac8b..c4ec3f8b03e 100644
--- a/packages/js/components/src/experimental-select-tree-control/select-tree-menu.tsx
+++ b/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,
 									} }
diff --git a/packages/js/components/src/experimental-select-tree-control/select-tree.tsx b/packages/js/components/src/experimental-select-tree-control/select-tree.tsx
index 5d4fac8ddef..529dfd18bb3 100644
--- a/packages/js/components/src/experimental-select-tree-control/select-tree.tsx
+++ b/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 );
 				} }
diff --git a/packages/js/components/src/experimental-tree-control/tree-item.tsx b/packages/js/components/src/experimental-tree-control/tree-item.tsx
index 757b7d2615e..fcc7012aa11 100644
--- a/packages/js/components/src/experimental-tree-control/tree-item.tsx
+++ b/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 }
 						/>
 					) }
 
diff --git a/packages/js/components/src/experimental-tree-control/tree.tsx b/packages/js/components/src/experimental-tree-control/tree.tsx
index e33a1a8f0eb..e33baf34a25 100644
--- a/packages/js/components/src/experimental-tree-control/tree.tsx
+++ b/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();
 						}
 					} }
 				>
diff --git a/packages/js/components/src/experimental-tree-control/types.ts b/packages/js/components/src/experimental-tree-control/types.ts
index 1d6e06549d4..e30172d0d44 100644
--- a/packages/js/components/src/experimental-tree-control/types.ts
+++ b/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 &
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dd90ac6c5cf..38712475de1 100644
--- a/pnpm-lock.yaml
+++ b/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==}