fix(useFocus): use useLayoutMount to prevent layout jitter

sheinsight · Jul 10, 2024 · f295032 · f295032
1 parent d0c8233
commit f295032
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/src/use-focus/index.ts b/src/use-focus/index.ts
@@ -1,6 +1,6 @@
 import { useCreation } from '../use-creation'
 import { useEventListener } from '../use-event-listener'
-import { useMount } from '../use-mount'
+import { useLayoutMount } from '../use-layout-mount'
 import { useSafeState } from '../use-safe-state'
 import { useStableFn } from '../use-stable-fn'
 import { normalizeElement, useTargetElement } from '../use-target-element'
@@ -49,7 +49,7 @@ export function useFocus<T extends HTMLElement = HTMLElement>(
   useEventListener(el, 'focus', () => setFocused(true))
   useEventListener(el, 'blur', () => setFocused(false))
 
-  useMount(() => {
+  useLayoutMount(() => {
     const isCurrentFocused = isElActive(el)
 
     if (focused && !isCurrentFocused) focus()