refactor: unmound popper element if closed in useDialogAnchor

GetStream · MartinCupela · Sep 16, 2024 · Sep 4, 2024 · Sep 5, 2024 · Sep 5, 2024
commit 9d1ee9d089def5350d8e3332c282ff1207bdb470
diff --git a/src/components/Dialog/DialogAnchor.tsx b/src/components/Dialog/DialogAnchor.tsx
@@ -42,6 +42,10 @@ export function useDialogAnchor<T extends HTMLElement>({
     }
   }, [open, popperElement, update]);
 
+  if (popperElement && !open) {
+    setPopperElement(null);
+  }
+
   return {
     attributes,
     setPopperElement,
@@ -87,13 +91,6 @@ export const DialogAnchor = ({
     };
   }, [dialog, open]);
 
-  useEffect(() => {
-    if (!open) {
-      // setting element reference back to null allows to re-run the usePopper component once the component is re-rendered
-      setPopperElement(null);
-    }
-  }, [open, setPopperElement]);
-
   // prevent rendering the dialog contents if the dialog should not be open / shown
   if (!open) {
     return null;

diff --git a/src/components/Dialog/DialogsManager.ts b/src/components/Dialog/DialogsManager.ts
        id,
        isOpen: false,
        open: () => {
          this.open({ id });
        },
        remove: () => {
          this.remove(id);
        },
        toggle: () => {
          this.toggleOpen({ id });
        },
        toggleSingle: () => {
          this.toggleOpenSingle({ id });
  ) {
    if (dialogsManagerEvents.includes(eventType as DialogsManagerEvent['type'])) {
      if (!this.dialogsManagerEventListeners[eventType as DialogsManagerEvent['type']]?.length)
        return;

      this.dialogsManagerEventListeners[
        eventType as DialogsManagerEvent['type']
diff --git a/src/components/Message/utils.tsx b/src/components/Message/utils.tsx
  }

  if (nextProps.closeReactionSelectorOnClick !== prevProps.closeReactionSelectorOnClick) {
    return false;
  }

  const messagesAreEqual = areMessagesEqual(prevMessage, nextMessage);
diff --git a/src/components/Reactions/ReactionSelector.tsx b/src/components/Reactions/ReactionSelector.tsx
        if (reaction.type === type) {
          return reaction.user?.name || reaction.user?.id;
        }
        return null;
      })
      .filter(Boolean);
	id,
	isOpen: false,
	open: () => {
	this.open({ id });
Check warning on line 58 in src/components/Dialog/DialogsManager.ts Codecov / codecov/patch src/components/Dialog/DialogsManager.ts#L58 `Added line #L58 was not covered by tests`
	},
	remove: () => {
	this.remove(id);
Check warning on line 61 in src/components/Dialog/DialogsManager.ts Codecov / codecov/patch src/components/Dialog/DialogsManager.ts#L61 `Added line #L61 was not covered by tests`
	},
	toggle: () => {
	this.toggleOpen({ id });
Check warning on line 64 in src/components/Dialog/DialogsManager.ts Codecov / codecov/patch src/components/Dialog/DialogsManager.ts#L64 `Added line #L64 was not covered by tests`
	},
	toggleSingle: () => {
	this.toggleOpenSingle({ id });
	) {
	if (dialogsManagerEvents.includes(eventType as DialogsManagerEvent['type'])) {
	if (!this.dialogsManagerEventListeners[eventType as DialogsManagerEvent['type']]?.length)
	return;
Check warning on line 108 in src/components/Dialog/DialogsManager.ts Codecov / codecov/patch src/components/Dialog/DialogsManager.ts#L108 `Added line #L108 was not covered by tests`

	this.dialogsManagerEventListeners[
	eventType as DialogsManagerEvent['type']
	}

	if (nextProps.closeReactionSelectorOnClick !== prevProps.closeReactionSelectorOnClick) {
	return false;
Check warning on line 318 in src/components/Message/utils.tsx Codecov / codecov/patch src/components/Message/utils.tsx#L318 `Added line #L318 was not covered by tests`
	}

	const messagesAreEqual = areMessagesEqual(prevMessage, nextMessage);
	if (reaction.type === type) {
	return reaction.user?.name \|\| reaction.user?.id;
	}
	return null;
Check warning on line 128 in src/components/Reactions/ReactionSelector.tsx Codecov / codecov/patch src/components/Reactions/ReactionSelector.tsx#L128 `Added line #L128 was not covered by tests`
	})
	.filter(Boolean);