Fix: Prevent select extension when hovering Ask AI button during mouse drag #1304
Conversation
WalkthroughThe changes update the behavior and styling of the "Ask AI" selection button by toggling a 'no-pointer' CSS class during mouse and touch interactions. JavaScript event listeners now add or remove this class on pointer events, while a new CSS rule disables pointer events for the button when the class is present. Changes
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
docs/md_v2/assets/selection_ask_ai.js (1)
167-167: Consider adding consistent touch event handling.The mousedown handler adds the
no-pointerclass, but the corresponding touchstart handler (line 174) doesn't. This could lead to inconsistent behavior between mouse and touch interactions on mobile devices.Consider adding the same class manipulation to the touchstart handler for consistency:
document.addEventListener('touchstart', (event) => { + if (askAiButton) askAiButton.classList.add('no-pointer'); // Same for touch events, but only hide if not on the button if (askAiButton && event.target !== askAiButton) { hideButton(); } });And ensure the touchend handler also removes the class:
-document.addEventListener('touchend', handleSelectionEvent); +document.addEventListener('touchend', (event) => { + if (askAiButton) askAiButton.classList.remove('no-pointer'); + handleSelectionEvent(event); +});
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/md_v2/assets/selection_ask_ai.js(2 hunks)docs/md_v2/assets/styles.css(1 hunks)
🔇 Additional comments (2)
docs/md_v2/assets/styles.css (1)
264-266: Clean CSS implementation for disabling pointer events.The CSS rule correctly disables pointer events on the Ask AI button when the
no-pointerclass is applied. The selector specificity and!importantdeclaration ensure this takes precedence during drag operations.docs/md_v2/assets/selection_ask_ai.js (1)
147-150: Proper cleanup of pointer events on mouseup.The implementation correctly removes the
no-pointerclass before processing the selection event, ensuring the button remains interactive after the drag operation completes.
Summary
Fixes a bug where, while selecting text and hovering over the Ask AI button (with the mouse button still held down), the browser would incorrectly extend the text selection to include extra content below the selection.
This PR disables pointer events on the Ask AI button while the mouse is pressed, preventing the browser from expanding the selection during drag.
List of files changed and why
.no-pointerclass to disable pointer events on the Ask AI button while selecting..no-pointerclass on the Ask AI button during selection drag.How Has This Been Tested?
https://github.com/user-attachments/assets/b3cde6e4-9ede-4a3e-8622-b6768417af95
Checklist
Summary by CodeRabbit
New Features
Style