fix(js): add key props to highlight children

algolia · Feb 5, 2021 · 11e5667 · 11e5667
1 parent 11f4cb7
commit 11e5667
Showing 1 changed file with 12 additions and 4 deletions.
diff --git a/packages/autocomplete-js/src/highlight.ts b/packages/autocomplete-js/src/highlight.ts
@@ -26,7 +26,9 @@ export function highlightHit<TItem extends Hit<{}>>({
   createElement = preactCreateElement,
 }: HighlightItemParams<TItem>) {
   return parseAlgoliaHitHighlight<TItem>({ hit, attribute }).map((x) =>
-    x.isHighlighted ? createElement(tagName, { children: x.value }) : x.value
+    x.isHighlighted
+      ? createElement(tagName, { key: x.value, children: x.value })
+      : x.value
   );
 }
 
@@ -42,7 +44,9 @@ export function reverseHighlightHit<TItem extends Hit<{}>>({
   createElement = preactCreateElement,
 }: HighlightItemParams<TItem>) {
   return parseAlgoliaHitReverseHighlight<TItem>({ hit, attribute }).map((x) =>
-    x.isHighlighted ? createElement(tagName, { children: x.value }) : x.value
+    x.isHighlighted
+      ? createElement(tagName, { key: x.value, children: x.value })
+      : x.value
   );
 }
 
@@ -56,7 +60,9 @@ export function snippetHit<TItem extends Hit<{}>>({
   createElement = preactCreateElement,
 }: HighlightItemParams<TItem>) {
   return parseAlgoliaHitSnippet<TItem>({ hit, attribute }).map((x) =>
-    x.isHighlighted ? createElement(tagName, { children: x.value }) : x.value
+    x.isHighlighted
+      ? createElement(tagName, { key: x.value, children: x.value })
+      : x.value
   );
 }
 
@@ -72,6 +78,8 @@ export function reverseSnippetHit<TItem extends Hit<{}>>({
   createElement = preactCreateElement,
 }: HighlightItemParams<TItem>) {
   return parseAlgoliaHitReverseSnippet<TItem>({ hit, attribute }).map((x) =>
-    x.isHighlighted ? createElement(tagName, { children: x.value }) : x.value
+    x.isHighlighted
+      ? createElement(tagName, { key: x.value, children: x.value })
+      : x.value
   );
 }