Fix SearchListControl styles

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

@@ -128,7 +128,10 @@ export const SearchListItem = ( {
 						)
 							? { indeterminate: true }
 							: {} ) }
-						label={ getHighlightedName( item.name, search ) }
+						label={ getHighlightedName(
+							decodeEntities( item.name ),
+							search
+						) }
 						onChange={ () => {
 							if ( isSelected ) {
 								onSelect(
@@ -160,31 +163,36 @@ export const SearchListItem = ( {
 	) : (
 		<label htmlFor={ id } className={ classes }>
 			{ isSingle ? (
-				<input
-					type="radio"
-					id={ id }
-					name={ name }
-					value={ item.value }
-					onChange={ onSelect( item ) }
-					checked={ isSelected }
-					className="woocommerce-search-list__item-input"
-					{ ...props }
-				></input>
+				<>
+					<input
+						type="radio"
+						id={ id }
+						name={ name }
+						value={ item.value }
+						onChange={ onSelect( item ) }
+						checked={ isSelected }
+						className="woocommerce-search-list__item-input"
+						{ ...props }
+					></input>
+
+					<ItemLabel item={ item } search={ search } />
+				</>
 			) : (
-				<input
-					type="checkbox"
+				<CheckboxControl
 					id={ id }
 					name={ name }
-					value={ item.value }
+					className="woocommerce-search-list__item-input"
+					value={ decodeEntities( item.value ) }
+					label={ getHighlightedName(
+						decodeEntities( item.name ),
+						search
+					) }
 					onChange={ onSelect( item ) }
 					checked={ isSelected }
-					className="woocommerce-search-list__item-input"
 					{ ...props }
-				></input>
+				/>
 			) }
 
-			<ItemLabel item={ item } search={ search } />
-
 			{ showCount ? <Count label={ countLabel || item.count } /> : null }
 		</label>
 	);

assets/js/editor-components/search-list-control/style.scss

@@ -186,7 +186,7 @@
 			}
 		}
 
-		.woocommerce-search-list__item-input {
+		.woocommerce-search-list__item-input[type="radio"] {
 			margin: 0 $gap-smaller 0 0;
 		}