Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

Reproduction Steps

No response

Actual (Problematic) Behavior

No response

Expected Behavior

No response

Additional Context

Summary

When using Monaco Editor's Find Widget (Ctrl+F / Cmd+F), the Close button (X) and adjacent buttons (e.g., "Find in Selection") become unclickable due to a rapid tooltip flickering effect.

Environment

• Monaco Editor version: @monaco-editor/react v4.7.0 (monaco-editor core)
• Browser: Chrome (latest stable)
• OS: macOS

Expected Behavior

When hovering over the Close button (X) or other buttons in the Find Widget, I should be able to click them normally.

Actual Behavior

When hovering over these buttons:

1. A tooltip (.workbench-hover-container) appears
2. The tooltip immediately triggers a mouseout event on the button
3. This causes the tooltip to disappear
4. With the tooltip gone, the mouse is back "on" the button, triggering another tooltip
5. This creates an infinite loop of rapid show/hide cycles (flickering)
6. During this flickering, click events cannot be registered on the button

Note: The Escape key still works to close the Find Widget - only mouse interaction is broken.

Steps to Reproduce

1. Open any Monaco Editor instance
2. Press Ctrl+F (or Cmd+F on Mac) to open the Find Widget
3. Move mouse cursor to hover over the Close button (X) on the right side of the widget
4. Observe the tooltip flickering rapidly
5. Try to click the button
6. Result: The button click does not register

Root Cause Analysis

Using Chrome DevTools with a MutationObserver, we captured the tooltip element being created:

const observer = new MutationObserver((mutations) => {
  mutations.forEach(m => {
    m.addedNodes.forEach(node => {
      if (node.nodeType === 1) console.log('Added:', node.className, node);
    });
  });
});
observer.observe(document.body, { childList: true, subtree: true });

Console output when hovering over the Close button:

Added: workbench-hover-container <div class="workbench-hover-container">...</div>
Added: workbench-hover-container <div class="workbench-hover-container">...</div>
Added: workbench-hover-container <div class="workbench-hover-container">...</div>
Added: workbench-hover-container <div class="workbench-hover-container">...</div>
... (repeats rapidly)

The .workbench-hover-container element is being created and destroyed in a rapid loop, indicating the flickering behavior.

Workaround

Hiding the hover container with CSS resolves the issue:

.workbench-hover-container {
  display: none !important;
}

This completely disables the hover tooltip, which stops the flickering loop and allows normal button clicks.

Alternative (if you want to keep tooltips visible but non-blocking):

.workbench-hover-container {
  pointer-events: none !important;
}

Note: This alternative did NOT work in our testing - the flickering loop continued even with pointer-events: none.

Impact

• Users cannot use mouse to close the Find Widget
• Users cannot click "Find in Selection" and other toolbar buttons
• Workaround exists (Escape key), but mouse interaction is a fundamental UX expectation

Suggested Fix

The hover tooltip positioning or timing logic may need adjustment to prevent the tooltip from triggering a mouseout event on the button it's describing. Possible approaches:

1. Add a small delay before showing the tooltip
2. Ensure the tooltip doesn't overlap or interfere with the button's hover area
3. Use pointer-events: none on the tooltip container (though this didn't work as a CSS override, it might work if implemented in the source)

Related Issues

• Similar to Issue #5139 which reported tooltip flickering on Find Widget buttons (closed without resolution)