Search for taxonomy with special characters (#40217)

* Decode html escaped characters in SelectTree

* Escape special characters when searching for taxonomies

* Add changelogs

* Remove unneeded decodeEntities

* Increment escapeHTML function to comply with what is happening in the legacy taxonomy editor

* Extract escapeHTML to @woocommerce/components

packages/js/components/changelog/fix-taxonomy-special-characters

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fix
+Comment: Decode html characters in SelectTree
+
+

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

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import { createElement, useEffect, useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { BaseControl, TextControl } from '@wordpress/components';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -16,6 +17,7 @@ import { SelectedItems } from '../experimental-select-control/selected-items';
 import { ComboBox } from '../experimental-select-control/combo-box';
 import { SuffixIcon } from '../experimental-select-control/suffix-icon';
 import { SelectTreeMenu } from './select-tree-menu';
+import { escapeHTML } from '../utils';
 
 interface SelectTreeProps extends TreeControlProps {
 	id: string;
@@ -185,11 +187,11 @@ export const SelectTree = function SelectTree( {
 					) : (
 						<TextControl
 							{ ...inputProps }
-							value={ props.createValue || '' }
+							value={ decodeEntities( props.createValue || '' ) }
 							onChange={ ( value ) => {
 								if ( onInputChange ) onInputChange( value );
 								const item = items.find(
-									( i ) => i.label === value
+									( i ) => i.label === escapeHTML( value )
 								);
 								if ( props.onSelect && item ) {
 									props.onSelect( item );

packages/js/components/src/index.ts

@@ -84,7 +84,7 @@ export { DynamicForm } from './dynamic-form';
 export { default as TourKit } from './tour-kit';
 export * as TourKitTypes from './tour-kit/types';
 export { CollapsibleContent } from './collapsible-content';
-export { createOrderedChildren, sortFillsByOrder } from './utils';
+export { createOrderedChildren, sortFillsByOrder, escapeHTML } from './utils';
 export { WooProductFieldItem as __experimentalWooProductFieldItem } from './woo-product-field-item';
 export { WooProductSectionItem as __experimentalWooProductSectionItem } from './woo-product-section-item';
 export { WooProductTabItem as __experimentalWooProductTabItem } from './woo-product-tab-item';

packages/js/components/src/utils.tsx

@@ -85,3 +85,10 @@ export const sortFillsByOrder: Slot.Props[ 'children' ] = ( fills ) => {
 
 	return <Fragment>{ sortedFills }</Fragment>;
 };
+
+export const escapeHTML = ( string: string ) => {
+	return string
+		.replace( /&/g, '&amp;' )
+		.replace( />/g, '&gt;' )
+		.replace( /</g, '&lt;' );
+};

packages/js/product-editor/changelog/fix-taxonomy-special-characters

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fix
+Comment: Escape special characters when searching for taxonomies
+
+

packages/js/product-editor/src/blocks/taxonomy/use-taxonomy-search.ts

@@ -3,6 +3,7 @@
  */
 import { useState } from '@wordpress/element';
 import { resolveSelect } from '@wordpress/data';
+import { escapeHTML } from '@woocommerce/components';
 /**
  * Internal dependencies
  */
@@ -61,7 +62,7 @@ const useTaxonomySearch = (
 				Taxonomy[]
 			>( 'taxonomy', taxonomyName, {
 				per_page: PAGINATION_SIZE,
-				search,
+				search: escapeHTML( search ),
 			} );
 			if ( options?.fetchParents ) {
 				taxonomies = await getTaxonomiesMissingParents(