diff --git a/change/@fluentui-react-26552add-8a6c-42a8-93ca-965284270f1f.json b/change/@fluentui-react-26552add-8a6c-42a8-93ca-965284270f1f.json new file mode 100644 index 00000000000000..6d6c60570229f2 --- /dev/null +++ b/change/@fluentui-react-26552add-8a6c-42a8-93ca-965284270f1f.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 d9de9b12f361db..6f539afcfd1d7b 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'; @@ -376,10 +377,23 @@ export class KeytipLayerBase extends React.Component { + const targetSelector = ktpTargetFromSequences(keySequences); + const matchingElements = document.querySelectorAll(targetSelector); + + // If there are multiple elements for the keytip sequence, return true if the element instance + // that corresponds to the keytip instance is visible, otherwise return if there is only one instance + return matchingElements.length > 1 && instanceCount <= matchingElements.length + ? isElementVisibleAndNotHidden(matchingElements[instanceCount - 1] as HTMLElement) + : instanceCount === 1; + }; + private _onDismiss = (ev?: React.MouseEvent): void => { // if we are in keytip mode, then exit keytip mode if (this.state.inKeytipMode) {