[Bug]: Setting Command Bar Item ref and using for Coachmark target, types don't match

[natejcho]

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 Intel(R) Core(TM) i7-10850H CPU @ 2.70GHz
    Memory: 40.41 GB / 63.73 GB
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.47)
    Internet Explorer: 11.0.19041.1566

"@fluentui/react": "7.149.4",
"react": "16.14.0",

Are you reporting Accessibility issue?

No response

Reproduction

https://codepen.io/natejcho/pen/jOzpJZP

Bug Description

Actual Behavior

I am using the CommandBar and CommandBarItem component and setting the componentRef prop in one of the items to const someRef = React.useRef<IContextualMenuRenderItem>(null). I want to use this ref to set the target for the Coachmark component. I am getting a typescript error about the types not matching.

CommandBarItem's comopnentRef prop expects: IRefObject<IContextualMenuRenderItem>

Coachmark's target prop expects: string | HTMLElement | null

Both components are fluent ui components, yet it seems I cannot use them together for some reason. The Coachmark is not visible at all

Expected Behavior

Coachmark target prop to accept same ref as CommandBarItem's componentRef

Logs

TS2322: Type 'IContextualMenuRenderItem | null' is not assignable to type 'string | HTMLElement | null'.    
  Type 'IContextualMenuRenderItem' is not assignable to type 'string | HTMLElement | null'.
    Type 'IContextualMenuRenderItem' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 234 more.

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[natejcho]

an even better example would be to riff off the fluent ui docs and just move the ref from the div to the Dropdown component

https://codepen.io/natejcho/pen/XWEBGxa

[micahgodbolt]

Refs are problematic in command bar due to how we measure the command bar to determine if it fits in the given space (basically we have to render it multiple times, which creates multiple version of the same ref, breaking the actual ref). Can you target without something less brittle? A data attribute or ID?

[msft-fluent-ui-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!