Stuck tooltips

[mtias]

Happens often that I end up with stuck tooltips in the UI:

[aduth]

Needs reliable steps to reproduce. I cannot recreate this issue.

Previous issues with disabled buttons were intended to be addressed in #3177.

[ephox-mogran]

I can't replicate this sporadically. I'll see if I can get a replication case.

[ephox-mogran]

I've only seen it happen with Redo, so it probably is a race condition somewhere with disabling and mutation observers.

[ephox-mogran]

I've got Undo's popover sticking as well. Also when disabled.

[ephox-mogran]

Essentially, before it happens, the button is disabled but if you hover over that disabled button, the tooltip still appears.

[ephox-mogran]

Still not 100%, but I have it happening regularly now.

[ephox-mogran]

An interesting part of it is that when you move the cursor over the buttons in the toolbar, the tooltip will only appear if you have previously moved over a non-disabled button. If you have moved over a disabled button, then the tooltip won't appear. I think it is related to that.

[ephox-mogran]

The best replication case I have is focus the PostTitle, and move the mouse left and right past either end of the header toolbar, stopping at each end. You don't need to click at all. Vary the speed and within a minute, it will probably happen once.

[aduth]

The best replication case I have is focus the PostTitle, and move the mouse left and right past either end of the header toolbar, stopping at each end. You don't need to click at all. Vary the speed and within a minute, it will probably happen once.

Nice steps. I was eventually able to reproduce.

It seems that the issue is occurring at this check:

gutenberg/components/tooltip/index.js

Lines 125 to 133 in 3f31557

	// Mouse events behave unreliably in React for disabled elements,
	// firing on mouseenter but not mouseleave. Further, the default
	// behavior for disabled elements in some browsers is to ignore
	// mouse events. Don't bother trying to to handle them.
	//
	// See: https://github.com/facebook/react/issues/4251
	if ( event.target.disabled ) {
	return;
	}

Where in some cases the event target is children of the SVG, in my experience a path node which is not disabled. I think it may be a matter of changing this to test event.currentTarget, i.e. the node being wrapped (the possibly-disabled button).