⬆️ Migration to Mantine v5.0 in Popover

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,8 +174,9 @@ export default function SearchBar(props: any) {
             {...props}
             {...form.getInputProps('query')}
           />
-        }
-      >
+        </Popover.Target>
+
+        <Popover.Dropdown onBlurCapture={() => setOpened(false)}>
           <ScrollArea style={{ height: 400 }} offsetScrollbars>
             {OverseerrResults.slice(0, 5).map((result, index) => (
               <React.Fragment key={index}>
@@ -182,6 +185,7 @@ export default function SearchBar(props: any) {
               </React.Fragment>
             ))}
           </ScrollArea>
+        </Popover.Dropdown>
       </Popover>
     </form>
   );