[Bug] Fix popover inside settings dialog

src/frontend/components/UI/PopoverComponent/index.scss

@@ -1,12 +1,17 @@
-.MuiPaper-root.MuiPopover-paper.popover-paper {
-  background-color: var(--background);
-  color: var(--text-primary);
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  box-shadow: 0 0 0 1px var(--border-color);
-  padding: 16px;
-  width: fit-content;
-  max-width: 500px;
-  overflow-y: auto;
-  overflow-x: hidden;
+.popover-wrapper {
+  position: relative;
+  .popover {
+    background-color: var(--background);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    box-shadow: 0 0 0 1px var(--border-color);
+    padding: 16px;
+    width: fit-content;
+    max-width: 500px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: absolute;
+    z-index: 2;
+  }
 }

src/frontend/components/UI/PopoverComponent/index.tsx

@@ -1,5 +1,4 @@
-import Popover from '@mui/material/Popover/Popover'
-import React, { useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import './index.scss'
 
 interface PopoverComponentProps {
@@ -11,46 +10,45 @@ const PopoverComponent: React.FC<PopoverComponentProps> = ({
   item,
   children
 }) => {
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-  const open = Boolean(anchorEl)
+  const [open, setOpen] = useState(false)
+  const wrapper = useRef<HTMLDivElement>(null)
 
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    // if already open, close it
+  const handleClick = () => {
+    setOpen(!open)
+  }
+
+  useEffect(() => {
     if (open) {
-      setAnchorEl(null)
-      return
-    }
+      // add a click listener to close the popover when clicking outside
+      const callback = (event: MouseEvent) => {
+        if (!wrapper.current!.contains(event.target as HTMLElement)) {
+          setOpen(false)
+        }
+      }
 
-    setAnchorEl(event.currentTarget)
-  }
+      document.addEventListener('click', callback)
 
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
+      return () => {
+        // remove the listener when the popover is closed
+        document.removeEventListener('click', callback)
+      }
+    } else {
+      return () => ''
+    }
+  }, [open])
 
   return (
-    <>
+    <div className="popover-wrapper" ref={wrapper}>
       {React.cloneElement(item, {
         onClick: handleClick,
         style: { cursor: 'pointer' }
       })}
-      <Popover
-        id={item.props.id}
-        open={open}
-        anchorEl={anchorEl}
-        onClick={handleClick}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left'
-        }}
-        classes={{
-          paper: 'popover-paper'
-        }}
-      >
-        {children}
-      </Popover>
-    </>
+      {open && (
+        <div id={item.props.id} className="popover">
+          {children}
+        </div>
+      )}
+    </div>
   )
 }