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,7 +48,11 @@
       const editIcon = <SWMansionIcon icon="edit" size={22} />;
       return (
         <div className={css.edit_menu}>
-          <Menu icon={editIcon} variant="member-actions">
+          <Menu
+            onChange={onMenuVisibilityChange}
+            icon={editIcon}
+            variant="member-actions"
+          >
             <MenuItem
               text="Unfriend"
               icon="user-cross"
@@ -59,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 = {