diff --git a/assets/js/editor-components/search-list-control/types.ts b/assets/js/editor-components/search-list-control/types.ts index b7852a251ac..55baf500d42 100644 --- a/assets/js/editor-components/search-list-control/types.ts +++ b/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, diff --git a/assets/js/editor-components/search-list-control/utils.tsx b/assets/js/editor-components/search-list-control/utils.tsx index 886752ceba8..2023b0ac1f1 100644 --- a/assets/js/editor-components/search-list-control/utils.tsx +++ b/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 ] ), diff --git a/assets/js/utils/attributes.ts b/assets/js/utils/attributes.ts index 9a52106f26f..5091a746a48 100644 --- a/assets/js/utils/attributes.ts +++ b/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 : '', }; };