From 418a99fc4775b94556d5b195f1af95a3159a05e7 Mon Sep 17 00:00:00 2001
From: Karol Manijak <karol.manijak@automattic.com>
Date: Thu, 1 Dec 2022 18:14:36 +0100
Subject: [PATCH] Refactor JSX element extension with custom properties to more
 robust way with object copy

---
 assets/js/blocks/rating-filter/block.tsx | 27 +++++++++++++++---------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/assets/js/blocks/rating-filter/block.tsx b/assets/js/blocks/rating-filter/block.tsx
index 697c2a1603d..2c3f60bd444 100644
--- a/assets/js/blocks/rating-filter/block.tsx
+++ b/assets/js/blocks/rating-filter/block.tsx
@@ -408,16 +408,23 @@ const RatingFilterBlock = ( {
 
 								const { label, value: rawValue } =
 									displayedResult;
-								// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-								// @ts-ignore - continue pretending this label is a string. Adding method required in further processing
-								label.toLocaleLowerCase = () => rawValue;
-								// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-								// @ts-ignore - continue pretending this label is a string. Adding method required in further processing
-								label.substring = (
-									start: number,
-									end: number
-								) => ( start === 0 && end === 1 ? label : '' );
-								return label;
+
+								// A label - JSX component - is extended with faked string methods to allow using JSX element as an option in FormTokenField
+								const extendedLabel = Object.assign(
+									{},
+									label,
+									{
+										toLocaleLowerCase: () => rawValue,
+										substring: (
+											start: number,
+											end: number
+										) =>
+											start === 0 && end === 1
+												? label
+												: '',
+									}
+								);
+								return extendedLabel;
 							} }
 							saveTransform={ formatSlug }
 							messages={ {