Regression: User card closing

app/ui/client/lib/UserCard.js

@@ -1,39 +1,63 @@
+import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Tracker } from 'meteor/tracker';
 
 import { createEphemeralPortal } from '../../../../client/reactAdapters';
 
 const Dep = new Tracker.Dependency();
-let state;
-let dom;
+
+let container;
+let routeComputation;
+let props;
 let unregister;
-const createAchor = () => {
+
+const createContainer = () => {
 	const div = document.createElement('div');
 	div.id = 'react-user-card';
 	document.body.appendChild(div);
 	return div;
 };
 
-
 export const closeUserCard = () => {
-	if (!dom) {
+	if (!container) {
 		return;
 	}
+
+	if (routeComputation) {
+		routeComputation.stop();
+		routeComputation = undefined;
+	}
+
 	Tracker.afterFlush(() => {
-		unregister = unregister && unregister();
+		if (unregister) {
+			unregister();
+			unregister = undefined;
+		}
 	});
 };
 
-const props = () => {
-	Dep.depend();
-	return state;
-};
-
-export const openUserCard = async ({ ...args }) => {
-	dom = dom || createAchor();
-	state = {
-		onClose: closeUserCard,
+export const openUserCard = async (args) => {
+	props = {
 		...args,
+		onClose: closeUserCard,
 	};
+
 	Dep.changed();
-	unregister = unregister || await createEphemeralPortal(() => import('../../../../client/channel/UserCard'), props, dom);
+
+	container = container || createContainer();
+
+	unregister = unregister || await createEphemeralPortal(
+		() => import('../../../../client/channel/UserCard'), () => {
+			Dep.depend();
+			return props;
+		},
+		container,
+	);
+
+	routeComputation = routeComputation || Tracker.autorun((c) => {
+		FlowRouter.watchPathChange();
+
+		if (!c.firstRun) {
+			closeUserCard();
+		}
+	});
 };

client/channel/UserCard/index.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { PositionAnimated, AnimatedVisibility, Menu, Option } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
@@ -10,7 +10,6 @@ import { Backdrop } from '../../components/basic/Backdrop';
 import * as UserStatus from '../../components/basic/UserStatus';
 import { LocalTime } from '../../components/basic/UTCClock';
 import { useUserInfoActions, useUserInfoActionsSpread } from '../hooks/useUserInfoActions';
-import { RouterContext } from '../../contexts/RouterContext';
 import { useRolesDescription } from '../../contexts/AuthorizationContext';
 
 const UserCardWithData = ({ username, onClose, target, open, rid }) => {
@@ -28,21 +27,6 @@ const UserCardWithData = ({ username, onClose, target, open, rid }) => {
 
 	ref.current = target;
 
-	const { queryCurrentRoute } = useContext(RouterContext);
-
-	useEffect(() => {
-		const subscription = queryCurrentRoute();
-
-		const unsubscribe = subscription.subscribe(() => {
-			onClose && onClose();
-			unsubscribe();
-		});
-
-		return () => {
-			unsubscribe();
-		};
-	}, [onClose, queryCurrentRoute]);
-
 	const user = useMemo(() => {
 		const loading = state === ENDPOINT_STATES.LOADING;
 		const defaultValue = loading ? undefined : null;

client/components/basic/UserCard.js

@@ -81,7 +81,8 @@ const UserCard = forwardRef(({
 	</Box>
 	<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} mis='x24' width='1px'>
 		<Box withTruncatedText display='flex'>
-			<Username status={status} name={name} title={username !== name && username}/>{nickname && <Box title={t('Nickname')} color='hint' mis='x8' fontScale='p1' withTruncatedText>({ nickname })</Box> }
+			<Username status={status} name={name} title={username !== name ? username : undefined} />
+			{nickname && <Box title={t('Nickname')} color='hint' mis='x8' fontScale='p1' withTruncatedText>({ nickname })</Box>}
 		</Box>
 		{ customStatus && <Info>{customStatus}</Info> }
 		<Roles>{roles}</Roles>