fix: model selector tooltip renders raw HTML tags instead of text#489
Draft
laileni-aws wants to merge 3 commits into
Draft
fix: model selector tooltip renders raw HTML tags instead of text#489laileni-aws wants to merge 3 commits into
laileni-aws wants to merge 3 commits into
Conversation
The select component built its hover tooltip using raw HTML tags (<strong> and <br>), but tooltip content is rendered through the markdown parser (via CardBody), which escapes raw HTML. As a result the literal tags were shown to users instead of a formatted label and description. Use markdown syntax (bold + line break) so the selected option's label and description render as intended. Adds unit tests covering the rendered tooltip content.
Use an explicit boolean comparison for the value returned by the Playwright evaluate call, which is typed as any. Fixes an eslint error that blocked the pre-push lint hook.
Wrap the Playwright evaluate result in Boolean() so the value is a genuine boolean in every toolchain. This satisfies strict-boolean- expressions without introducing an unnecessary boolean-literal comparison, keeping the lint gate green across environments.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The model selector's hover tooltip displayed raw HTML tags (e.g.
<strong>and<br>) as literal text instead of a formatted label and description. This makes the tooltip look broken to users. This PR fixes the tooltip to render correctly and adds unit tests to guard against regression.Problem
When hovering over a
selectform item that has options with adescription(such as the model selector in chat), the tooltip showed something like:instead of a bold label followed by its description.
Root cause
SelectInternal.getCurrentTooltip()insrc/components/form-items/select.tsbuilt the tooltip content using raw HTML tags:That string is passed to
showTooltip(), which renders it through aCardBody.CardBodyrenders itsbodyvia the markdown parser (parseMarkdown), and the parser's HTML renderer is configured to escape raw HTML:As a result, the raw
<strong>/<br>tags were escaped and shown to the user verbatim.Fix
Use markdown syntax instead of raw HTML so the content renders correctly through the same parser:
CardBodyalready invokes the parser with line breaks enabled (includeLineBreaks: true), so the newline becomes a line break and**…**renders as bold — producing the intended "bold label + description" tooltip without any raw HTML.Testing
src/__test__/components/form-items/select.spec.tscovering the tooltip content path:<strong>element) and never leaks literal<strong>/<br>text;tooltipwhen the selected option has no description.npx jest): 72 suites / 845 tests.eslintandprettier --checkpass; production build (npm run build) succeeds.Additional change
ui-tests/__test__/flows/quick-action-commands-header.ts: replaced an implicit truthiness check on anany-typed value with an explicit boolean comparison to satisfy@typescript-eslint/strict-boolean-expressions. This was a pre-existing lint error unrelated to the tooltip fix; correcting it keeps the lint gate green.Notes