fix(react-keytips): fix tree issue with not removing the nodes (#274)

microsoft · Dec 19, 2024 · d0c919b · d0c919b
1 parent 6fedbd5
commit d0c919b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/change/@fluentui-contrib-react-keytips-0d1d16b6-84a2-42c8-88eb-2076c577056f.json b/change/@fluentui-contrib-react-keytips-0d1d16b6-84a2-42c8-88eb-2076c577056f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: fix the issue with showing duplicates in Overflow",
+  "packageName": "@fluentui-contrib/react-keytips",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-keytips/src/components/Keytips/useKeytips.tsx b/packages/react-keytips/src/components/Keytips/useKeytips.tsx
@@ -123,13 +123,17 @@ export const useKeytips_unstable = (props: KeytipsProps): KeytipsState => {
         keytip,
       });
 
-      if (state.inKeytipMode && tree.isCurrentKeytipParent(keytip)) {
+      if (tree.isCurrentKeytipParent(keytip)) {
         showKeytips(tree.getChildren());
       }
     };
 
     const handleKeytipRemoved = (keytip: KeytipWithId) => {
       tree.removeNode(keytip.uniqueId);
+      // nodemway mave an alias registered, if it's shortcut
+      if (keytip.isShortcut) {
+        tree.removeNode(`${keytip.uniqueId}-alias`);
+      }
 
       dispatch({ type: ACTIONS.REMOVE_KEYTIP, id: keytip.uniqueId });
     };
@@ -147,7 +151,7 @@ export const useKeytips_unstable = (props: KeytipsProps): KeytipsState => {
     return () => {
       reset();
     };
-  }, [state.inKeytipMode]);
+  }, []);
 
   React.useEffect(() => {
     const controller = new AbortController();

diff --git a/packages/react-keytips/stories/OverflowMenu.stories.tsx b/packages/react-keytips/stories/OverflowMenu.stories.tsx
@@ -108,7 +108,7 @@ const OverflowMenuItemWrapper = React.forwardRef<
   }
 
   return (
-    <MenuItem id={keytipProps.id} ref={mergedRefs} persistOnClick>
+    <MenuItem id={keytipProps.id} ref={mergedRefs}>
       Item {keytipProps.id}
     </MenuItem>
   );