fix(Dialog): it now focuses the first element automatically

Author: DSil

packages/orbit-components/src/Dialog/index.tsx

@@ -13,6 +13,7 @@ import useLockScrolling from "../hooks/useLockScrolling";
 import useClickOutside from "../hooks/useClickOutside";
 import useRandomId from "../hooks/useRandomId";
 import type { Props } from "./types";
+import FOCUSABLE_ELEMENT_SELECTORS from "../hooks/useFocusTrap/consts";
 
 const ActionButtonWrapper = ({ children }: { children: React.ReactNode }) => {
   return (
@@ -72,6 +73,17 @@ const Dialog = ({
     };
   }, [triggerRef]);
 
+  React.useEffect(() => {
+    if (ref.current) {
+      const focusableElements = ref.current.querySelectorAll<HTMLElement>(
+        FOCUSABLE_ELEMENT_SELECTORS,
+      );
+      if (focusableElements.length > 0) {
+        focusableElements[0].focus();
+      }
+    }
+  }, []);
+
   const handleClose = (ev: MouseEvent) => {
     if (ref && ref.current && onClose) {
       if (ref.current && !ref.current.contains(ev.target as Node)) onClose();