From 00cfd9c303da8cc1d259a0caa74ff5068ce21a1f Mon Sep 17 00:00:00 2001
From: Christian Vuerings <christian@cambly.com>
Date: Mon, 25 Mar 2024 09:41:49 -0700
Subject: [PATCH] Modal/FocusTrap: useLayoutEffect

---
 .changeset/tasty-clocks-rule.md              | 6 ++++++
 packages/syntax-core/src/Modal/FocusTrap.tsx | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tasty-clocks-rule.md

diff --git a/.changeset/tasty-clocks-rule.md b/.changeset/tasty-clocks-rule.md
new file mode 100644
index 00000000..771ae59c
--- /dev/null
+++ 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
index dc74f7af..6ca18942 100644
--- 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`