From 573ae038b3a005151f16235b1a149b12620bfdc6 Mon Sep 17 00:00:00 2001
From: Ben Merckx <ben@codeurs.be>
Date: Wed, 11 Oct 2023 11:50:35 +0200
Subject: [PATCH] The headless ui dialog causes too many focus problems to keep
 it in. We'll need to look for an alternative.

---
 src/dashboard/view/Modal.module.scss |  2 +-
 src/dashboard/view/Modal.tsx         | 31 ++++++++++------------------
 2 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/src/dashboard/view/Modal.module.scss b/src/dashboard/view/Modal.module.scss
index 53b4ec719..a51422ba2 100644
--- a/src/dashboard/view/Modal.module.scss
+++ b/src/dashboard/view/Modal.module.scss
@@ -1,5 +1,5 @@
 .root {
-  position: absolute;
+  position: fixed;
   inset: 0;
   z-index: 4;
   padding: 20px 30px;
diff --git a/src/dashboard/view/Modal.tsx b/src/dashboard/view/Modal.tsx
index c198e7e14..91e302649 100644
--- a/src/dashboard/view/Modal.tsx
+++ b/src/dashboard/view/Modal.tsx
@@ -1,32 +1,23 @@
-import {Dialog} from '@headlessui/react'
 import {IconButton} from 'alinea/dashboard/view/IconButton'
 import {IcRoundClose} from 'alinea/ui/icons/IcRoundClose'
 import {fromModule} from 'alinea/ui/util/Styler'
-import {ComponentPropsWithoutRef, PropsWithChildren, useRef} from 'react'
+import {PropsWithChildren, useRef} from 'react'
 import css from './Modal.module.scss'
 
 const styles = fromModule(css)
 
-export type ModalProps = PropsWithChildren<
-  {
-    open?: boolean
-    onClose: () => void
-    className?: string
-  } & ComponentPropsWithoutRef<typeof Dialog>
->
+export type ModalProps = PropsWithChildren<{
+  open?: boolean
+  onClose: () => void
+  className?: string
+}>
 export function Modal({children, ...props}: ModalProps) {
   const modalRef = useRef(null)
-
+  if (!props.open) return null
   return (
-    <Dialog
-      {...props}
-      open={Boolean(props.open)}
-      ref={modalRef}
-      initialFocus={modalRef}
-      className={styles.root({open: props.open})}
-    >
+    <div {...props} ref={modalRef} className={styles.root({open: props.open})}>
       <div className={styles.root.background()} onClick={props.onClose}></div>
-      <Dialog.Panel className={styles.root.inner.mergeProps(props)()}>
+      <div className={styles.root.inner.mergeProps(props)()}>
         {children}
         <IconButton
           className={styles.root.inner.close()}
@@ -34,7 +25,7 @@ export function Modal({children, ...props}: ModalProps) {
           icon={IcRoundClose}
           onClick={props.onClose}
         />
-      </Dialog.Panel>
-    </Dialog>
+      </div>
+    </div>
   )
 }