How to stop the context menu from appearing on the headers of details list groups in fluentui?

edit

You can prevent the context menu from appearing on the headers of details list groups in fluentui by setting the "data-is-focusable" attribute to "true" on the header element. This will ensure that the header element does not have focus and will not trigger the context menu on right-click.

For example, in React JSX, you can add the "data-is-focusable" attribute to the header element as follows:

<DetailsList
  items={items}
  groups={groups}
  onRenderHeader={(props, defaultRender) => {
    return (
      <div
        data-is-focusable="true" // Add this attribute to prevent context menu
        role="button"
        onClick={() => {
          // Handle click event
        }}
      >
        {defaultRender(props)}
      </div>
    );
  }}
/>

Note that setting "data-is-focusable" to false or removing it entirely on a header element will allow the context menu to appear on right-click.