From 637f20450ef21008e9ffeff298197d5f4d9c383d Mon Sep 17 00:00:00 2001
From: LASER-Yi <liangyi0007@gmail.com>
Date: Sat, 18 Dec 2021 22:16:28 +0800
Subject: [PATCH] Fix #1642

---
 bazarr/api/system/searches.py         | 1 +
 frontend/src/App/Header.tsx           | 7 +++++++
 frontend/src/components/SearchBar.tsx | 3 ++-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/bazarr/api/system/searches.py b/bazarr/api/system/searches.py
index 5386be226..c85fa82bf 100644
--- a/bazarr/api/system/searches.py
+++ b/bazarr/api/system/searches.py
@@ -37,4 +37,5 @@ class Searches(Resource):
                 movies = list(movies)
                 search_list += movies
 
+
         return jsonify(search_list)
diff --git a/frontend/src/App/Header.tsx b/frontend/src/App/Header.tsx
index 9ca33a574..0f91cadae 100644
--- a/frontend/src/App/Header.tsx
+++ b/frontend/src/App/Header.tsx
@@ -5,6 +5,7 @@ import {
   faUser,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { uniqueId } from "lodash";
 import React, { FunctionComponent, useMemo } from "react";
 import {
   Button,
@@ -35,16 +36,22 @@ async function SearchItem(text: string) {
 
   return results.map<SearchResult>((v) => {
     let link: string;
+    let id: string;
     if (v.sonarrSeriesId) {
       link = `/series/${v.sonarrSeriesId}`;
+      id = `series-${v.sonarrSeriesId}`;
     } else if (v.radarrId) {
       link = `/movies/${v.radarrId}`;
+      id = `movie-${v.radarrId}`;
     } else {
       link = "";
+      id = uniqueId("unknown");
     }
+
     return {
       name: `${v.title} (${v.year})`,
       link,
+      id,
     };
   });
 }
diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx
index 66c5db321..86ad517a8 100644
--- a/frontend/src/components/SearchBar.tsx
+++ b/frontend/src/components/SearchBar.tsx
@@ -10,6 +10,7 @@ import { useHistory } from "react-router";
 import { useThrottle } from "rooks";
 
 export interface SearchResult {
+  id: string;
   name: string;
   link?: string;
 }
@@ -58,7 +59,7 @@ export const SearchBar: FunctionComponent<Props> = ({
   const items = useMemo(() => {
     const its = results.map((v) => (
       <Dropdown.Item
-        key={v.name}
+        key={v.id}
         eventKey={v.link}
         disabled={v.link === undefined}
       >