diff --git a/web/settings/relationship/friend-list-row.react.js b/web/settings/relationship/friend-list-row.react.js
--- a/web/settings/relationship/friend-list-row.react.js
+++ b/web/settings/relationship/friend-list-row.react.js
@@ -13,7 +13,7 @@
 import type { UserRowProps } from './user-list.react';
 
 function FriendListRow(props: UserRowProps): React.Node {
-  const { userInfo } = props;
+  const { userInfo, onMenuVisibilityChange } = props;
 
   const { friendUser, unfriendUser } = useRelationshipCallbacks(userInfo.id);
   const buttons = React.useMemo(() => {
@@ -48,6 +48,7 @@
       return (
         <div className={css.edit_menu}>
           <Menu
+            onChange={onMenuVisibilityChange}
             icon={<SWMansionIcon icon="edit" size={22} />}
             variant="member-actions"
           >
@@ -62,7 +63,12 @@
       );
     }
     return undefined;
-  }, [friendUser, unfriendUser, userInfo.relationshipStatus]);
+  }, [
+    friendUser,
+    unfriendUser,
+    userInfo.relationshipStatus,
+    onMenuVisibilityChange,
+  ]);
 
   return (
     <div className={css.container}>
diff --git a/web/settings/relationship/user-list.react.js b/web/settings/relationship/user-list.react.js
--- a/web/settings/relationship/user-list.react.js
+++ b/web/settings/relationship/user-list.react.js
@@ -10,6 +10,7 @@
 
 export type UserRowProps = {
   +userInfo: AccountUserInfo,
+  +onMenuVisibilityChange?: (visible: boolean) => void,
 };
 
 type UserListProps = {