Toggletip in Datagrid header doesn't work when using useSortableColumns

[molyholy]

Package

Carbon for IBM Products

Description

A common design pattern is putting a Toggletip in the header of a Datagrid to provide more info. Normally, this works fine, however, it breaks when you use useSortableColumns. When you go to click on the Toggletip, the row sorting function will take "precendence," so you can't open the Toggletip.

Component(s) impacted

Datagrid
Toggletip (from @carbon/react)

Browser

Firefox

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

^1

Suggested Severity

None

Product/offering

IBM Cloud

CodeSandbox or Stackblitz example

https://codesandbox.io/p/sandbox/reverent-gianmarco-jzqnn9

Steps to reproduce the issue (if applicable)

Open the CodeSandbox. Observe how when you click on the "x" button in the Datagrid header, the Toggletip content will not open.

Then remove useSortableColumns from the Datagrid's state. Observe how clicking on the "x" Toggletip button will now open the content as expected.

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues