Search code examples
office-ui-fabric

How to have a div rather than a button for pivot link

I want to customize a PivotItem to make it close-able (kind of like browser tabs).

I provided a custom onRenderItemLink implementation do display an X icon on the right side of the tab, and an onClick method on that icon that will close the tab.

The main issue I'm facing is that this PivotItem is wrapped with a button (Pivot.Base.tsx renders a Commandbutton), that intercepts all onClick events on Firefox.

Firefox does not allow onClick events under a Button (this seems to be in accordance with the standard, so it's not considered a bug), so i can never close a tab on Firefox.

Is there any way to force Fabric UI to create a div rather than a button in this scenario?

Is there any other way to force a div there (some way to intercept what fabric ui creates and switch the button with a div)?

Advice appreciated.

Solution

  • Ended up closing the tab if the button was clicked on its right side

    const clickX = clickEvent.pageX;
const buttonRight = clickEvent.currentTarget.offsetLeft + clickEvent.currentTarget.offsetWidth ;
if (buttonRight - clickX <= 40) {
  removeTab(tab);
}