Skip to content

fix: form item tooltip persists over chat after clicking a toggle#490

Draft
laileni-aws wants to merge 2 commits into
aws:mainfrom
laileni-aws:fix/form-item-tooltip-persists-on-click
Draft

fix: form item tooltip persists over chat after clicking a toggle#490
laileni-aws wants to merge 2 commits into
aws:mainfrom
laileni-aws:fix/form-item-tooltip-persists-on-click

Conversation

@laileni-aws

Copy link
Copy Markdown
Contributor

Summary

A form-item tooltip (for example, the tooltip on a toggle switch such as the agentic-coding mode toggle) could remain on screen after the control was clicked, overlaying the chat and blocking interaction until it was dismissed. This PR makes the tooltip dismiss as soon as the control is activated.

Problem

Steps that reproduce the issue:

  1. Hover over a form-item control that has a tooltip (e.g. a switch) — the tooltip appears.
  2. Click the control to toggle it.
  3. The tooltip stays visible on top of the chat and cannot be interacted around, making the chat temporarily unusable.

Root cause

In src/components/chat-item/chat-item-form-items.ts, the tooltip was wired to only two events:

mouseover: (e) => { /* ...show tooltip after a delay... */ },
mouseleave: this.hideTooltip

When the control is clicked:

  • No handler hid the tooltip on click, and the overlay is created with closeOnOutsideClick: false, so clicking does not dismiss it.
  • Toggling the control can cause the prompt input to re-render, which removes the control element before mouseleave fires. The tooltip Overlay is appended to the document body, so it is left orphaned on top of the chat with no element left to trigger mouseleave.

Fix

Dismiss the tooltip when the control is activated by also handling mousedown and click:

mouseover: (e) => { /* ...show tooltip after a delay... */ },
mousedown: this.hideTooltip,
click: this.hideTooltip,
mouseleave: this.hideTooltip

hideTooltip both closes an open tooltip overlay and clears the pending show-timer, so it also prevents a tooltip from appearing after the user has already clicked.

Testing

  • Added unit tests in src/components/__test__/chat-item/chat-item-form-items.spec.ts:
    • the tooltip is shown on hover after the delay;
    • the tooltip is dismissed when the control is clicked (so it cannot block the chat after toggling);
    • a pending tooltip is cancelled when the control is clicked before the delay elapses.
  • The dismiss/cancel tests were confirmed to fail against the previous implementation and pass with this change.
  • Full unit test suite passes (npx jest): 72 suites / 845 tests.
  • eslint and prettier --check pass; production build (npm run build) succeeds.

Additional change

  • ui-tests/__test__/flows/quick-action-commands-header.ts: coerced the result of a Playwright evaluate call to a boolean with Boolean(...) before using it in a condition. This keeps the value a genuine boolean across toolchains, satisfying @typescript-eslint/strict-boolean-expressions, and keeps the repo lint gate green.

Notes

  • Change is limited to tooltip event handling for form items; no public API changes.

The tooltip for a form item control (e.g. a toggle switch) was shown
on mouseover and only hidden on mouseleave. When the control is
clicked, toggling it can re-render the prompt input and remove the
element before mouseleave fires, leaving the tooltip overlay orphaned
on top of the chat and blocking interaction.

Hide the tooltip on mousedown/click as well, which also clears any
pending show timer. Adds tests covering show-on-hover, dismiss-on-click,
and cancelling a pending tooltip.
Wrap the Playwright evaluate result in Boolean() so the value is a
genuine boolean in every toolchain, satisfying strict-boolean-
expressions. Keeps the repo lint gate green.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant