fix(plasma-core): Add promise resolve for forceUpdate method in `Popu…

…p` and `Tooltip` components
salute-developers · Jun 8, 2023 · 9e76cb4 · 9e76cb4
1 parent d566a89
commit 9e76cb4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/packages/plasma-core/src/components/Popup/Popup.tsx b/packages/plasma-core/src/components/Popup/Popup.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useRef, useCallback, useEffect } from 'react';
+import React, { memo, useRef, useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import type { HTMLAttributes, ReactNode, RefAttributes, SyntheticEvent } from 'react';
 import styled from 'styled-components';
 import { usePopper } from 'react-popper';
@@ -158,8 +158,14 @@ export const Popup = memo<PopupProps & RefAttributes<HTMLDivElement>>(
                     return;
                 }
 
-                forceUpdate();
-            }, [isOpen]);
+                /*
+                 * INFO: Метод forceUpdate содержит в себе flushSync и приводит
+                 * к повторному рендеру компонента, который уже находится в процессе рендера.
+                 * Данный хак, нужен для того, чтобы это поведение избежать и перенаправить
+                 * вызов метода в очередь микрозадач.
+                 */
+                Promise.resolve().then(forceUpdate);
+            }, [isOpen, forceUpdate]);
 
             return (
                 <StyledRoot

diff --git a/packages/plasma-hope/src/components/Tooltip/Tooltip.tsx b/packages/plasma-hope/src/components/Tooltip/Tooltip.tsx
@@ -154,8 +154,14 @@ export const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(
                 return;
             }
 
-            forceUpdate();
-        }, [isVisible]);
+            /*
+             * INFO: Метод forceUpdate содержит в себе flushSync и приводит
+             * к повторному рендеру компонента, который уже находится в процессе рендера.
+             * Данный хак, нужен для того, чтобы это поведение избежать и перенаправить
+             * вызов метода в очередь микрозадач.
+             */
+            Promise.resolve().then(forceUpdate);
+        }, [isVisible, forceUpdate]);
 
         return (
             <>