Adding split button to PivotItem

[redlab-chris]

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Memory: 4.06 GB / 15.91 GB
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (104.0.1293.70)
    Internet Explorer: 11.0.22000.120

Are you reporting Accessibility issue?

no

Reproduction

https://codepen.io/redlab-chris/pen/bGvPjey

Bug Description

Actual Behavior

When rendering a inside of the custom rendering method of (via onRenderItemLink), a DOM warning is produced in the browser console output:
"Warning: validateDOMNesting(...): button cannot appear as a descendant of button.

See the provided code-pen console output
It seems like that the PivotItem uses an ActionButton and the IconButton in the code example above is rendered within.

Out use case is such that we want to render an IconButton with menu props next to the pivot item label so that a pivot item gets a dropdown with options.

Expected Behavior

That no warning is given.

Logs

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
    at button
    at BaseButton (http://localhost:3000/static/js/0.chunk.js:59871:24)
    at DefaultButton (http://localhost:3000/static/js/0.chunk.js:61709:38)
    at ComponentWithInjectedProps (http://localhost:3000/static/js/0.chunk.js:135495:28)
    at PrimaryButton (http://localhost:3000/static/js/0.chunk.js:62008:38)
    at ComponentWithInjectedProps (http://localhost:3000/static/js/0.chunk.js:135495:28)
    at div
    at ResultComponent (http://localhost:3000/static/js/0.chunk.js:29318:108)
    at div
    at ResultComponent (http://localhost:3000/static/js/0.chunk.js:29318:108)
    at span
    at button
    at BaseButton (http://localhost:3000/static/js/0.chunk.js:59871:24)
    at ActionButton (http://localhost:3000/static/js/0.chunk.js:59657:38)
    at ComponentWithInjectedProps (http://localhost:3000/static/js/0.chunk.js:135495:28)
    at div
    at FocusZone (http://localhost:3000/static/js/0.chunk.js:52832:24)
    at div
    at http://localhost:3000/static/js/0.chunk.js:103754:66
    at http://localhost:3000/static/js/0.chunk.js:140012:62
    at div
    at div
    at ScrollablePaneBase (http://localhost:3000/static/js/0.chunk.js:105913:24)
    at http://localhost:3000/static/js/0.chunk.js:140012:62
    at div
    at ResultComponent (http://localhost:3000/static/js/0.chunk.js:29318:108)
    at div
    at ResultComponent (http://localhost:3000/static/js/0.chunk.js:29318:108)
    at DashboardCollection (http://localhost:3000/static/js/main.chunk.js:11195:75)
    at Route (http://localhost:3000/static/js/0.chunk.js:289878:29)
    at Switch (http://localhost:3000/static/js/0.chunk.js:290080:29)
    at div
    at ResultComponent (http://localhost:3000/static/js/0.chunk.js:29318:108)
    at div
    at ResultComponent (http://localhost:3000/static/js/0.chunk.js:29318:108)
    at div
    at ResultComponent (http://localhost:3000/static/js/0.chunk.js:29318:108)
    at div
    at ResultComponent (http://localhost:3000/static/js/0.chunk.js:29318:108)
    at DashboardOverview (http://localhost:3000/static/js/main.chunk.js:120431:5)
    at C (http://localhost:3000/static/js/0.chunk.js:290135:37)
    at I18nextWithTranslation (http://localhost:3000/static/js/0.chunk.js:287257:31)
    at Route (http://localhost:3000/static/js/0.chunk.js:289878:29)
    at Switch (http://localhost:3000/static/js/0.chunk.js:290080:29)
    at div
    at div
    at ScrollablePaneBase (http://localhost:3000/static/js/0.chunk.js:105913:24)
    at http://localhost:3000/static/js/0.chunk.js:140012:62
    at Suspense
    at div
    at ResultComponent (http://localhost:3000/static/js/0.chunk.js:29318:108)
    at div
    at ResultComponent (http://localhost:3000/static/js/0.chunk.js:29318:108)
    at div
    at ResultComponent (http://localhost:3000/static/js/0.chunk.js:29318:108)
    at div
    at ResultComponent (http://localhost:3000/static/js/0.chunk.js:29318:108)
    at div
    at ResultComponent (http://localhost:3000/static/js/0.chunk.js:29318:108)
    at div
    at ResultComponent (http://localhost:3000/static/js/0.chunk.js:29318:108)
    at Router (http://localhost:3000/static/js/0.chunk.js:289509:30)
    at BrowserRouter (http://localhost:3000/static/js/0.chunk.js:289130:35)
    at div
    at http://localhost:3000/static/js/0.chunk.js:123607:142
    at App (http://localhost:3000/static/js/main.chunk.js:271:5)
    at Suspense

Requested priority

Normal

Products/sites affected

No response

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.

[micahgodbolt]

This isn't really a bug. A button tab inside of a button tag is invalid HTML. If you're looking to add a split button to a pivot, you can use headerMenuProps to make the button a split button instead. This example gets the functionality right, but there is still styling you'd have to do.

https://codepen.io/micahgodbolt/pen/JjLgjPE?editors=0011