🚧 work in progress

frameless · Jan 31, 2024 · ec9e665 · ec9e665
1 parent 994352a
commit ec9e665
Showing 1 changed file with 22 additions and 2 deletions.
diff --git a/packages/next-templates/src/app/FigureDetails/page.tsx b/packages/next-templates/src/app/FigureDetails/page.tsx
@@ -4,7 +4,6 @@ import {
   Button,
   Drawer,
   Figure,
-  Paragraph,
   Table,
   TableBody,
   TableCell,
@@ -14,7 +13,7 @@ import {
   TableRow,
 } from '@utrecht/component-library-react';
 import { VegaVisualization } from '@utrecht/component-library-react/dist/VegaVisualization';
-import React, { HTMLAttributes, PropsWithChildren, createRef, useState } from 'react';
+import React, { HTMLAttributes, PropsWithChildren, createRef, useCallback, useEffect, useState } from 'react';
 import './styles/FigureDetails.css';
 
 interface FigureDetailsProps extends Omit<HTMLAttributes<HTMLLIElement>, 'children'> {
@@ -43,6 +42,27 @@ export const FigureDetails = ({
     drawer.current?.close();
   };
 
+  const handleFocus = useCallback<EventListener>(
+    (event) => {
+      const isInsideNav = drawer.current?.contains(event.target as Node);
+      if (!isInsideNav) {
+        closeModal;
+      }
+    },
+    [drawer],
+  );
+
+  useEffect(() => {
+    //TODO: Remove eventlistener if element is not rendered anymore
+    drawer.current?.ownerDocument.addEventListener('focus', handleFocus, true);
+  }, []);
+
+  const handleKeyDown = (evt: KeyboardEvent) => {
+    if (evt.key === 'Escape') {
+      closeModal;
+    }
+  };
+
   let FigureDetails = (
     <div>
       <Button onClick={showModal}>{openButtonText}</Button>