From 7239d0303f057159ee7ee6772ba1980a0297a413 Mon Sep 17 00:00:00 2001
From: literat <tomas@litera.me>
Date: Sun, 5 Nov 2023 08:55:13 +0100
Subject: [PATCH] Fix(web-react): Replace useLayoutEffect with
 useIsomorphicLayoutEffect

  * to avoid error messages while rendering on the server side
---
 .../src/components/FileUploader/useFileUploaderAttachment.ts | 5 +++--
 packages/web-react/src/hooks/useClickOutside.ts              | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/web-react/src/components/FileUploader/useFileUploaderAttachment.ts b/packages/web-react/src/components/FileUploader/useFileUploaderAttachment.ts
index 65887db2e7..af8dcfeacd 100644
--- a/packages/web-react/src/components/FileUploader/useFileUploaderAttachment.ts
+++ b/packages/web-react/src/components/FileUploader/useFileUploaderAttachment.ts
@@ -1,4 +1,5 @@
-import { RefObject, useLayoutEffect } from 'react';
+import { RefObject } from 'react';
+import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect';
 import { FileMetadata } from '../../types/fileUploader';
 import { getAttachmentInput, getAttachmentMetaInput } from './utils';
 
@@ -17,7 +18,7 @@ export const useFileUploaderAttachment = ({
   meta,
   onError,
 }: UseFileUploaderAttachmentProps) => {
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const createAttachmentInput = (metadata: FileMetadata) => {
       attachmentRef.current?.querySelectorAll('input').forEach((element) => element.remove());
       const attachmentInputElement = getAttachmentInput(file, name, onError);
diff --git a/packages/web-react/src/hooks/useClickOutside.ts b/packages/web-react/src/hooks/useClickOutside.ts
index 3f501a3a1c..605547eb9b 100644
--- a/packages/web-react/src/hooks/useClickOutside.ts
+++ b/packages/web-react/src/hooks/useClickOutside.ts
@@ -1,4 +1,5 @@
-import { useLayoutEffect, useCallback, MutableRefObject } from 'react';
+import { MutableRefObject, useCallback } from 'react';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 
 export interface UseClickOutsideProps {
   ref: MutableRefObject<HTMLElement | null>;
@@ -34,7 +35,7 @@ export const useClickOutside = ({ ref, callback }: UseClickOutsideProps): void =
     [ref, callback],
   );
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     document.addEventListener('click', clickHandler, { capture: true });
 
     return () => document.removeEventListener('click', clickHandler, { capture: true });