Fix missing onEscape handle in SelectTree (woocommerce#49396)

* Fix missing onEscape handle in SelectTree * Avoid passing onEscape to html element * Propagate onEscape for recursive Tree
Neosate · Jul 17, 2024 · f2a4db4 · f2a4db4
1 parent 16513b3
commit f2a4db4
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 1 deletion.
diff --git a/packages/js/components/changelog/fix-add-escape-handle b/packages/js/components/changelog/fix-add-escape-handle
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fix
+Comment: Fix missing onEscape handle in SelectTree
+
+
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
@@ -348,6 +348,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/hooks/use-tree-item.ts b/packages/js/components/src/experimental-tree-control/hooks/use-tree-item.ts
@@ -31,6 +31,7 @@ export function useTreeItem( {
 	onLastItemLoop,
 	onFirstItemLoop,
 	onTreeBlur,
+	onEscape,
 	...props
 }: TreeItemProps ) {
 	const nextLevel = level + 1;

diff --git a/packages/js/components/src/experimental-tree-control/hooks/use-tree.ts b/packages/js/components/src/experimental-tree-control/hooks/use-tree.ts
@@ -24,6 +24,7 @@ export function useTree( {
 	onCreateNew,
 	shouldShowCreateButton,
 	onFirstItemLoop,
+	onEscape,
 	...props
 }: TreeProps ) {
 	return {

diff --git a/packages/js/components/src/experimental-tree-control/tree-item.tsx b/packages/js/components/src/experimental-tree-control/tree-item.tsx
@@ -108,7 +108,7 @@ export const TreeItem = forwardRef( function ForwardedTreeItem(
 			</div>
 
 			{ Boolean( item.children.length ) && isExpanded && (
-				<Tree { ...treeProps } />
+				<Tree { ...treeProps } onEscape={ props.onEscape } />
 			) }
 		</li>
 	);
-Original file line number
+Diff line change
@@ Expand Up @@
     			</div>
     			{ Boolean( item.children.length ) && isExpanded && (
-    				<Tree { ...treeProps } />
+    				<Tree { ...treeProps } onEscape={ props.onEscape } />
     			) }
     		</li>
     	);
@@ Expand Down @@