Modal/FocusTrap: useLayoutEffect

Cambly · Mar 25, 2024 · 00cfd9c · 00cfd9c
1 parent 3715437
commit 00cfd9c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/.changeset/tasty-clocks-rule.md b/.changeset/tasty-clocks-rule.md
@@ -0,0 +1,6 @@
+---
+"@cambly/syntax-core": minor
+"@syntax/storybook": minor
+---
+
+Modal/FocusTrap: useLayoutEffect
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`