From b7882d481eb2de5e0da325a4315993964d512b91 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Thu, 29 Dec 2022 13:44:37 +0800
Subject: [PATCH] fix(console): close modal on tab changed on user details page
 (#2750)

---
 packages/console/src/pages/UserDetails/index.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/console/src/pages/UserDetails/index.tsx b/packages/console/src/pages/UserDetails/index.tsx
index c34f718a2..4d669edf1 100644
--- a/packages/console/src/pages/UserDetails/index.tsx
+++ b/packages/console/src/pages/UserDetails/index.tsx
@@ -1,6 +1,6 @@
 import type { User } from '@logto/schemas';
 import classNames from 'classnames';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
@@ -32,8 +32,8 @@ import * as styles from './index.module.scss';
 import { userDetailsParser } from './utils';
 
 const UserDetails = () => {
-  const location = useLocation();
-  const isLogs = location.pathname.endsWith('/logs');
+  const { pathname } = useLocation();
+  const isLogs = pathname.endsWith('/logs');
   const { userId } = useParams();
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [isDeleteFormOpen, setIsDeleteFormOpen] = useState(false);
@@ -55,6 +55,11 @@ const UserDetails = () => {
     return userDetailsParser.toLocalForm(data);
   }, [data]);
 
+  useEffect(() => {
+    setIsDeleteFormOpen(false);
+    setIsResetPasswordFormOpen(false);
+  }, [pathname]);
+
   const onDelete = async () => {
     if (!data || isDeleting) {
       return;