Fix Attribute terms sometimes being assigned children

assets/js/editor-components/search-list-control/types.ts

@@ -38,11 +38,18 @@ export type SearchListItem = {
 	breadcrumbs: string[];
 	children?: SearchListItem[];
 	count: number;
-	id: string | number;
+	id?: string | number;
 	name: string;
 	parent: number;
+	termId?: string | number;
 	value: string;
-};
+	// This is to avoid a problem with overlapping
+	// ids with terms and their parents.
+	// For more context: https://github.com/woocommerce/woocommerce-blocks/pull/8720
+} & (
+	| { id: string | number; termId?: never }
+	| { id?: never; termId: string | number }
+ );
 
 export interface SearchListItemsContainerProps
 	extends SearchListControlProps,

assets/js/editor-components/search-list-control/utils.tsx

@@ -57,8 +57,13 @@ export const buildTermsTree = (
 
 	const fillWithChildren = ( terms: SearchListItem[] ): SearchListItem[] => {
 		return terms.map( ( term ) => {
-			const children = termsByParent[ term.id ];
-			builtParents.push( '' + term.id );
+			const id = ( term.id ?? term.termId ) as string | number;
+			// If the object has `termId` property, it is an `AttributeTerm`.
+			// Those can't have children, but sometimes they have the same `id`
+			// as an `AttributeObject`, causing possible overlaps.
+			// For more context: https://github.com/woocommerce/woocommerce-blocks/pull/8720
+			const children = term.termId ? null : termsByParent[ id ];
+			builtParents.push( '' + id );
 			return {
 				...term,
 				breadcrumbs: getParentsName( listById[ term.parent ] ),

assets/js/utils/attributes.ts

@@ -55,14 +55,20 @@ export const convertAttributeObjectToSearchItem = (
 ): SearchListItem => {
 	const { count, id, name, parent } = attribute;
 
+	const base = isAttributeTerm( attribute )
+		? {
+				termId: id,
+				value: attribute.attr_slug,
+		  }
+		: { id, value: '' };
+
 	return {
+		...base,
 		count,
-		id,
 		name,
 		parent,
 		breadcrumbs: [],
 		children: [],
-		value: isAttributeTerm( attribute ) ? attribute.attr_slug : '',
 	};
 };