Modal/FocusTrap: useLayoutEffect

Cambly · Mar 25, 2024 · 2f5fe85 · 2f5fe85
1 parent 3715437
commit 2f5fe85
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/packages/syntax-core/src/Modal/FocusTrap.tsx b/packages/syntax-core/src/Modal/FocusTrap.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, type ReactElement } from "react";
+import React, { useRef, type ReactElement, useLayoutEffect } from "react";
 
 function queryFocusableAll(el: HTMLDivElement): NodeListOf<HTMLElement> {
   // Focusable, interactive elements that could possibly be in children
@@ -39,7 +39,7 @@ export default function FocusTrap({
   const elRef = useRef<HTMLDivElement | null>(null);
   const previouslyFocusedElRef = useRef<HTMLElement | null>(null);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const { current: element } = elRef;
 
     // Focus the first child element among all the focusable, interactive elements within `children`