Tooltip not closing - mouseEvent not fired

[gschlader101]

mantine-react-table version

v1.3.3

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

The Tooltip for the Column sort button in the table head does not close. (applies also to search, column density..)

It is reproduceable actually on the Mantine React Table demo site as well, as seen in the screenshot below where the mouse pointer is hovering a row and the sorting tooltip is still there.

To reproduce it, you have to move the mouse pointer away quickly downwards after the click on the button.

Chain of events, what I suspect is happening:

1. Icon is hovered --> Tooltip appears

2. Icon is clicked --> Sorting order Label changes --> Tooltip stays
   If now the mouse pointer is pulled away during the rerender, the Tooltip will stay permanently.

3. If the mouse pointer is moved away after the rerender is completed --> Tooltip goes away

I believe the way to improve it, would be to make the Tooltip disappear in the onclick event.

You guys are doing an amazing job !

Minimal, Reproducible Example - (Optional, but Recommended)

can be reproduced here for example, probably it gets easier to reproduce if table is a bit larger and rerender takes longer.

https://www.mantine-react-table.com/docs/guides/column-ordering-dnd

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

Maybe, I'll investigate and start debugging

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[gschlader101]

here are some more clarifications:

The underlying library for the Tooltip is mantine/core and that uses Floating UI.

The onOpenChange event is not fired in the scenario described above because it's lost during rerender
as it is uncontrolled.

The open state change is "correct" , but the onCange event is not fired.

So it's not really a bug in the MRT, but I think the behavior could be improved by:

• having a prop enableToolbarTooltip
• close the Tooltip on the onClick event, when an icon is clicked

[KevinVandy]

I've already solved this with managed state for the full screen button. Didn't realize that the sort tooltips needed this too

[Dalimil]

We are experiencing the same issue. Since columns keep changing widths, clicking sort asc/desc on the column header can cause column width to change and the tooltip stays open forever, not registering the mouse event that should close it.

[e4stwood]

Any plans to fix this or a workaround?

[Squiff-14]

I've ran into this too, example below looks to be corrected by re-hovering over the sortby icon.
And can be easily missed if you linger your sortby icon click.

Strange one, would like to know what causes it.

e.g.
https://www.loom.com/embed/c361ccd34fae4e8c8c775532ce9095a4?sid=33e232fc-6074-4873-991c-bbc1ebd9a7f1