From 68d1068059370d7ce6d945eef65f9ed90c9d5f59 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Sun, 7 Aug 2022 17:20:34 +0200
Subject: [PATCH] :arrow_up: Migration to Mantine v5.0 in Popover

---
 src/modules/search/SearchModule.tsx | 38 ++++++++++++++++-------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/modules/search/SearchModule.tsx b/src/modules/search/SearchModule.tsx
index a2836b2ca..29cbb6e3e 100644
--- a/src/modules/search/SearchModule.tsx
+++ b/src/modules/search/SearchModule.tsx
@@ -1,7 +1,7 @@
-import { Kbd, createStyles, Autocomplete } from '@mantine/core';
+import { Kbd, createStyles, Autocomplete, Popover, ScrollArea, Divider } from '@mantine/core';
 import { useDebouncedValue, useHotkeys } from '@mantine/hooks';
 import { useForm } from '@mantine/form';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   IconSearch as Search,
   IconBrandYoutube as BrandYoutube,
@@ -144,14 +144,16 @@ export default function SearchBar(props: any) {
       <Popover
         opened={OverseerrResults.length > 0 && opened}
         position="bottom"
-        placement="start"
+        withArrow
+        withinPortal
+        shadow="md"
         radius="md"
-        trapFocus={false}
+        trapFocus
         transition="pop-bottom-right"
-        onFocusCapture={() => setOpened(true)}
-        onBlurCapture={() => setOpened(false)}
-        target={
+      >
+        <Popover.Target>
           <Autocomplete
+            onFocusCapture={() => setOpened(true)}
             autoFocus
             variant="filled"
             data={autocompleteData}
@@ -172,16 +174,18 @@ export default function SearchBar(props: any) {
             {...props}
             {...form.getInputProps('query')}
           />
-        }
-      >
-        <ScrollArea style={{ height: 400 }} offsetScrollbars>
-          {OverseerrResults.slice(0, 5).map((result, index) => (
-            <React.Fragment key={index}>
-              <OverseerrMediaDisplay key={result.id} media={result} />
-              {index < OverseerrResults.length - 1 && <Divider variant="dashed" my="xl" />}
-            </React.Fragment>
-          ))}
-        </ScrollArea>
+        </Popover.Target>
+
+        <Popover.Dropdown onBlurCapture={() => setOpened(false)}>
+          <ScrollArea style={{ height: 400 }} offsetScrollbars>
+            {OverseerrResults.slice(0, 5).map((result, index) => (
+              <React.Fragment key={index}>
+                <OverseerrMediaDisplay key={result.id} media={result} />
+                {index < OverseerrResults.length - 1 && <Divider variant="dashed" my="xl" />}
+              </React.Fragment>
+            ))}
+          </ScrollArea>
+        </Popover.Dropdown>
       </Popover>
     </form>
   );