From f2498c6fb570f0b5ee3a58429a80b5e6b0e84a0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= <uyarnchen@gmail.com>
Date: Sun, 7 Apr 2024 10:44:19 +0800
Subject: [PATCH] fix(Guide): fix guide initial position in ssr (#2832)

* fix(Guide): fix guide initial position in ssr

* fix(Guide): fix guide inital position in ssr
---
 src/guide/Guide.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/guide/Guide.tsx b/src/guide/Guide.tsx
index c16b6750ed..6075642d18 100644
--- a/src/guide/Guide.tsx
+++ b/src/guide/Guide.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useEffect, useRef, useState } from 'react';
 import isFunction from 'lodash/isFunction';
 import cx from 'classnames';
 import { createPortal } from 'react-dom';
@@ -12,6 +12,7 @@ import setStyle from '../_common/js/utils/set-style';
 import useControlled from '../hooks/useControlled';
 import { guideDefaultProps } from './defaultProps';
 import useDefaultProps from '../hooks/useDefaultProps';
+import useIsomorphicLayoutEffect from '../_util/useLayoutEffect';
 
 export type GuideProps = TdGuideProps;
 
@@ -88,7 +89,6 @@ const Guide: React.FC<GuideProps> = (originalProps) => {
 
   const showPopupGuide = () => {
     currentHighlightLayerElm.current = getTargetElm(currentStepInfo.element);
-
     setTimeout(() => {
       scrollToParentVisibleArea(currentHighlightLayerElm.current);
       setHighlightLayerPosition(highlightLayerRef.current);
@@ -104,6 +104,7 @@ const Guide: React.FC<GuideProps> = (originalProps) => {
   const showDialogGuide = () => {
     setTimeout(() => {
       currentHighlightLayerElm.current = dialogTooltipRef.current;
+
       scrollToParentVisibleArea(currentHighlightLayerElm.current);
       setHighlightLayerPosition(highlightLayerRef.current);
       scrollToElm(currentHighlightLayerElm.current);
@@ -179,7 +180,7 @@ const Guide: React.FC<GuideProps> = (originalProps) => {
     }
   };
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (innerCurrent >= 0 && innerCurrent < steps.length) {
       initGuide();
     } else {
@@ -189,13 +190,18 @@ const Guide: React.FC<GuideProps> = (originalProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [innerCurrent]);
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     initGuide();
 
-    return destroyGuide;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(
+    () => destroyGuide,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
   const renderOverlayLayer = () =>
     createPortal(
       <div ref={overlayLayerRef} className={`${prefixCls}__overlay`} style={{ zIndex: zIndex - 2 }} />,