From 1d4062a7c52e24f32044741f9ee6679c91cf671a Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <svenvandescheur@gmail.com>
Date: Thu, 1 Aug 2024 16:54:49 +0200
Subject: [PATCH] :sparkles: - feat: restore autofocus when opening modal

---
 src/components/modal/modal.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 46bba47a..bd723cbc 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -14,6 +14,7 @@ export type ModalProps = Omit<React.ComponentProps<"dialog">, "title"> & {
   open?: React.ComponentProps<"dialog">["open"];
   onClose?: React.ComponentProps<"dialog">["onClose"];
   position?: "float" | "side";
+  restoreAutofocus?: boolean;
   size?: "m" | "s";
   title?: string | React.ReactNode;
 };
@@ -27,6 +28,7 @@ export const Modal: React.FC<ModalProps> = ({
   open,
   onClose,
   position = "float",
+  restoreAutofocus = true,
   size,
   title,
   labelClose,
@@ -40,12 +42,26 @@ export const Modal: React.FC<ModalProps> = ({
     if (open) {
       dialogRef.current?.showModal();
       setOpenState(true);
+      if (restoreAutofocus) {
+        doRestoreAutofocus();
+      }
     } else {
       setOpenState(false);
       dialogRef.current?.close();
     }
   }, [open]);
 
+  /**
+   * Focuses the first child element with "autofocus" set.
+   */
+  const doRestoreAutofocus = () => {
+    setTimeout(() => {
+      const input =
+        dialogRef.current?.querySelector<HTMLInputElement>("[autofocus]");
+      input?.focus();
+    });
+  };
+
   /**
    * Gets called when to modal is closed.
    * @param e