fix: feedback

scaleway · Sep 7, 2023 · e19dd06 · e19dd06
1 parent 6067c87
commit e19dd06
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/packages/ui/src/components/Modal/Dialog.tsx b/packages/ui/src/components/Modal/Dialog.tsx
@@ -80,15 +80,15 @@ export const Dialog = ({
   backdropCss,
 }: DialogProps) => {
   const containerRef = useRef(document.createElement('div'))
-  const dialogRef = useRef(document.createElement('dialog'))
+  const dialogRef = useRef<HTMLDialogElement>(null)
   const onCloseRef = useRef(onClose)
 
   // Portal to put the modal in
   useEffect(() => {
     const element = containerRef.current
     if (open) {
       document.body.appendChild(element)
-      dialogRef.current.focus()
+      dialogRef.current?.focus()
     }
 
     return () => {
@@ -167,9 +167,10 @@ export const Dialog = ({
       return
     }
 
-    const focusableEls = dialogRef.current.querySelectorAll(
-      'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])',
-    )
+    const focusableEls =
+      dialogRef.current?.querySelectorAll(
+        'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])',
+      ) ?? []
 
     // Handle case when no interactive element are within the modal (including close icon)
     if (focusableEls.length === 0) {