diff --git a/change/@fluentui-react-f5d92ca7-54dc-4233-b320-97e9faf3f3b1.json b/change/@fluentui-react-f5d92ca7-54dc-4233-b320-97e9faf3f3b1.json new file mode 100644 index 0000000000000..6d6c60570229f --- /dev/null +++ b/change/@fluentui-react-f5d92ca7-54dc-4233-b320-97e9faf3f3b1.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Keytip: Make keytip data align with which instance is visible (for duplicate registrations)", + "packageName": "@fluentui/react", + "email": "jspurlin@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx b/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx index 0dec0dbf36e45..a94c99632957e 100644 --- a/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx +++ b/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx @@ -12,6 +12,7 @@ import { Async, initializeComponentRef, KeyCodes, + isElementVisibleAndNotHidden, } from '../../Utilities'; import { KeytipManager } from '../../utilities/keytips/KeytipManager'; import { KeytipTree } from './KeytipTree'; @@ -375,7 +376,15 @@ export class KeytipLayerBase extends React.Component 1 && seenIds[keytipId] <= matchingElements.length) { + return keytip.visible && isElementVisibleAndNotHidden(matchingElements[seenIds[keytipId] - 1] as HTMLElement); + } return keytip.visible && seenIds[keytipId] === 1; }); }