Library

React Components / v9 (@fluentui/react-components)

System Info

n/a

Are you reporting Accessibility issue?

no

Reproduction

https://stackblitz.com/edit/2ftonu?file=src%2Fexample.tsx

Bug Description

function tabRef(element) {
  console.log(element);
}

const Example = () => <Tab content={{ ref: tabRef }}>Hello</Tab>

(I couldn't get stack blitz to render anything on screen, but the above code is a minimum repro for the bug)

Actual Behavior

Both <span class="fui-Tab__content ... and <span class="fui-Tab__content-reserved-space ... are logged to console, despite using a single stable callback ref.

Expected Behavior

I expect a ref for the content slot to only reference the content element.

Only the content slot ref should be passed in to the callback, not the reserved space ref. Only <span class="fui-Tab__content ... should be logged.

(We can work around this by turning off reserved space but this behavior is confusing)

Logs

No response

Requested priority

Low

Products/sites affected

Microsoft Loop

Are you willing to submit a PR to fix?

no

Validations

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