From 84a6c38d9c439171a83dc432c83b85a6981bded0 Mon Sep 17 00:00:00 2001
From: Manuel <30572287+manuel-rw@users.noreply.github.com>
Date: Mon, 30 Jan 2023 21:12:45 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Search=20bar=20not=20respecting?=
 =?UTF-8?q?=20the=20open=20target=20#666?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/header/Search.tsx | 37 +++++++++++++++----------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/components/layout/header/Search.tsx b/src/components/layout/header/Search.tsx
index bf9753425..ba8d799d0 100644
--- a/src/components/layout/header/Search.tsx
+++ b/src/components/layout/header/Search.tsx
@@ -20,6 +20,7 @@ import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { useConfigContext } from '../../../config/provider';
 import { OverseerrMediaDisplay } from '../../../modules/common';
 import { IModule } from '../../../modules/ModuleTypes';
+import { ConfigType } from '../../../types/config';
 import { searchUrls } from '../../Settings/Common/SearchEngine/SearchEngineSelector';
 import Tip from '../Tip';
 import { useCardStyles } from '../useCardStyles';
@@ -137,9 +138,7 @@ export function Search() {
   const textInput = useRef<HTMLInputElement>(null);
   useHotkeys([['mod+K', () => textInput.current?.focus()]]);
   const { classes } = useStyles();
-  const openInNewTab = config?.settings.common.searchEngine.properties.openInNewTab
-    ? '_blank'
-    : '_self';
+  const openTarget = getOpenTarget(config);
   const [opened, setOpened] = useState(false);
 
   const {
@@ -166,6 +165,7 @@ export function Search() {
   if (!isModuleEnabled) {
     return null;
   }
+
   //TODO: Fix the bug where clicking anything inside the Modal to ask for a movie
   // will close it (Because it closes the underlying Popover)
   return (
@@ -194,7 +194,7 @@ export function Search() {
               setOpened(false);
               if (item.url) {
                 setSearchQuery('');
-                window.open(item.openedUrl ? item.openedUrl : item.url, openInNewTab);
+                window.open(item.openedUrl ? item.openedUrl : item.url, openTarget);
               }
             }}
             // Replace %s if it is in selectedSearchEngine.url with searchQuery, otherwise append searchQuery at the end of it
@@ -205,9 +205,9 @@ export function Search() {
                 autocompleteData.length === 0
               ) {
                 if (selectedSearchEngine.url.includes('%s')) {
-                  window.open(selectedSearchEngine.url.replace('%s', searchQuery), openInNewTab);
+                  window.open(selectedSearchEngine.url.replace('%s', searchQuery), openTarget);
                 } else {
-                  window.open(selectedSearchEngine.url + searchQuery, openInNewTab);
+                  window.open(selectedSearchEngine.url + searchQuery, openTarget);
                 }
               }
             }}
@@ -220,14 +220,15 @@ export function Search() {
         </Popover.Target>
         <Popover.Dropdown>
           <ScrollArea style={{ height: '80vh', maxWidth: '90vw' }} offsetScrollbars>
-            {OverseerrResults && OverseerrResults.slice(0, 4).map((result: any, index: number) => (
-              <React.Fragment key={index}>
-                <OverseerrMediaDisplay key={result.id} media={result} />
-                {index < OverseerrResults.length - 1 && index < 3 && (
-                  <Divider variant="dashed" my="xs" />
-                )}
-              </React.Fragment>
-            ))}
+            {OverseerrResults &&
+              OverseerrResults.slice(0, 4).map((result: any, index: number) => (
+                <React.Fragment key={index}>
+                  <OverseerrMediaDisplay key={result.id} media={result} />
+                  {index < OverseerrResults.length - 1 && index < 3 && (
+                    <Divider variant="dashed" my="xs" />
+                  )}
+                </React.Fragment>
+              ))}
           </ScrollArea>
         </Popover.Dropdown>
       </Popover>
@@ -299,3 +300,11 @@ export function Search() {
     });
   }
 }
+
+const getOpenTarget = (config: ConfigType | undefined): '_blank' | '_self' => {
+  if (!config || config.settings.common.searchEngine.properties.openInNewTab === undefined) {
+    return '_blank';
+  }
+
+  return config.settings.common.searchEngine.properties.openInNewTab ? '_blank' : '_self';
+};