fix: Make Learn more link clickable in cancel/speedup modal tooltip#39964
Merged
georgewrmarshall merged 7 commits intomainfrom Feb 11, 2026
Merged
fix: Make Learn more link clickable in cancel/speedup modal tooltip#39964georgewrmarshall merged 7 commits intomainfrom
georgewrmarshall merged 7 commits intomainfrom
Conversation
The Learn more link in the InfoTooltip on the cancel/speedup transaction
modal was not clickable. The issue was caused by TextButton asChild wrapper
which prevented the link from being interactive within the tooltip context.
Changes:
- Removed TextButton asChild wrapper from the Learn more link
- Moved the link directly inside the Text component
- Added Tailwind classes for styling (text-primary-default hover:text-primary-alternative cursor-pointer)
- Added proper spacing with {' '} before the link
Fixes #39878
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js
Outdated
Show resolved
Hide resolved
Improved adherence to UI Development Guidelines by:
- Using Text component with as="a" prop for the link
- Using color={TextColor.Primary} prop for static color
- Reserving className only for interactive state (hover) and utilities
This follows the component prop priority order:
Component Props → className for extras (hover/utilities)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js
Outdated
Show resolved
Hide resolved
- Added TextColor to imports for color={TextColor.Primary}
- Removed unused TextButton import
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Text component uses asChild (not as) to merge props onto child element. The asChild pattern works with react-tippy's html prop, unlike TextButton asChild which has issues with event delegation in the tooltip context. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Changed URL from deprecated community forum link to the official support article: https://support.metamask.io/manage-crypto/transactions/how-to-speed-up-or-cancel-a-pending-transaction Reverted to original TextButton asChild pattern as it works correctly in Storybook (verified via testing). The component pattern was never the issue - only the outdated URL needed updating. Fixes #39878 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
TextButton is part of the design system package, not the local component-library exports. This fixes the import error where TextButton was not found in ../../component-library. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
Builds ready [97c3b28]
UI Startup Metrics (1366 ± 101 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
The "Learn more" link inside the InfoTooltip was not clickable because
the Modal's click-outside handler was triggered when clicking on the
tooltip (which is portaled outside the modal DOM).
Changes:
- Set isClosedOnOutsideClick={false} on the Modal component
- Removed unused TextColor import
This allows users to click the "Learn more" link in the tooltip while
keeping all other modal functionality intact. Users can still close the
modal using the X button or pressing Escape.
Related to #39878
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
Builds ready [d36b152]
UI Startup Metrics (1351 ± 91 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚀 Bundle size reduced!]
|
| isOpen | ||
| onClose={() => closeModal(['cancelSpeedUpTransaction'])} | ||
| className="cancel-speedup-popover" | ||
| isClosedOnOutsideClick={false} |
Contributor
Author
There was a problem hiding this comment.
The tooltip renders outside of the main body, so clicking on it is registered as an outside click. This prevents the modal from closing when clicking on the overlay, but still allows the link inside the tooltip within the modal to be clicked.
| <TextButton asChild className="inline"> | ||
| <a | ||
| href="https://community.metamask.io/t/how-to-speed-up-or-cancel-transactions-on-metamask/3296" | ||
| href="https://support.metamask.io/manage-crypto/transactions/how-to-speed-up-or-cancel-a-pending-transaction" |
Contributor
Author
There was a problem hiding this comment.
Original link was broken
Before
After
Contributor
There was a problem hiding this comment.
Should this use ZENDESK_URLS.SPEEDUP_CANCEL?
Contributor
Author
There was a problem hiding this comment.
Ahh didn't know this existed will create a fix
brianacnguyen
approved these changes
Feb 11, 2026
davidmurdoch
approved these changes
Feb 11, 2026
Contributor
davidmurdoch
left a comment
There was a problem hiding this comment.
approved, but with a comment.
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
4 participants
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.
Description
Fixed the non-functional "Learn more" link in the InfoTooltip on the cancel/speedup transaction modal. The link was not clickable due to a TextButton asChild wrapper preventing interaction within the tooltip context.
Reason for change: The "Learn more" link in the tooltip was completely non-functional - clicking it had no effect.
Solution: Removed the TextButton asChild wrapper and moved the link directly inside the Text component with proper Tailwind styling classes.
Changelog
CHANGELOG entry: Fixed broken "Learn more" link in cancel/speedup transaction modal tooltip
Related issues
Fixes: #39878
Manual testing steps
Screenshots/Recordings
Before
The "Learn more" link was not clickable - clicking had no effect.
Screen.Recording.2026-02-06.at.13.26.19.mov
After
The "Learn more" link now properly opens the support article in a new tab.
Screen.Recording.2026-02-10.at.2.23.40.PM.mov
Pre-merge author checklist
Code Review Notes
This fix adheres to all UI Development Guidelines:
Pre-merge reviewer checklist
Note
Low Risk
Small UI-only change to modal behavior and a tooltip hyperlink; low likelihood of regressions beyond this specific flow.
Overview
Updates the cancel/speed-up transaction modal to not close on outside click by setting
isClosedOnOutsideClick={false}.Also updates the tooltip "Learn more" URL to point to the current MetaMask support article for speeding up/canceling pending transactions.
Written by Cursor Bugbot for commit d36b152. This will update automatically on new commits. Configure here.