fix(dashboard-tabs): disable drag on input fields during tab reorder #36889
Conversation
Prevents drag activation when clicking on input/textarea elements, allowing users to edit tab titles without accidentally triggering drag-and-drop reordering
|
CodeAnt AI is reviewing your PR. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
Code Review Agent Run #f841b1Actionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
codeant-ai-for-open-source
bot
added
the
size:M
Sequence DiagramShows how pointer events are routed to the PointerSensor which now detects interactive elements (input/textarea/contentEditable). If interactive, drag activation is prevented so the user can edit the tab title; otherwise the normal drag-reorder flow proceeds. sequenceDiagram
participant User
participant Browser
participant PointerSensor
participant DndContext
participant TabsRenderer
User->>Browser: Pointer down on tab title
Browser->>PointerSensor: Deliver pointer event
alt Target is interactive (input/textarea/contentEditable)
PointerSensor-->>Browser: Prevent drag activation
Browser-->>User: Show text cursor / allow editing
User->>TabsRenderer: Edit tab title
TabsRenderer-->>User: Save/display updated title
else Target is non-interactive
PointerSensor->>DndContext: Activate drag
DndContext->>TabsRenderer: Reorder tabs onDragEnd
TabsRenderer-->>User: Render reordered tabs
end
Generated by CodeAnt AI |
Nitpicks 🔍
|
EnxDev
added
the
🎪 ⚡ showtime-trigger-start
github-actions
bot
added
🎪 ad53a4c 🚦 building
![codeant-ai-for-open-source[bot]](https://avatars.githubusercontent.com/u/151810221?s=60&v=4){kind=small}
| handler: ({ nativeEvent: event }, { onActivation }) => { | ||
| if ( | ||
| event.button !== 0 || | ||
| isInteractiveElement(event.target as HTMLElement) | ||
| ) { | ||
| return false; | ||
| } | ||
| onActivation?.({ event }); |
There was a problem hiding this comment.
Suggestion: The custom PointerSensor.activators handler calls onActivation directly on pointer down whenever the conditions pass, which bypasses the configured activationConstraint: { distance: 10 } on the sensor; this means drags will start immediately instead of after the intended movement threshold, causing unintended drags when users just click tabs. [logic error]
Severity Level: Minor
| handler: ({ nativeEvent: event }, { onActivation }) => { | |
| if ( | |
| event.button !== 0 || | |
| isInteractiveElement(event.target as HTMLElement) | |
| ) { | |
| return false; | |
| } | |
| onActivation?.({ event }); | |
| handler: ({ nativeEvent: event }) => { | |
| if ( | |
| event.button !== 0 || | |
| isInteractiveElement(event.target as HTMLElement) | |
| ) { | |
| return false; | |
| } | |
| // Returning true lets the default PointerSensor logic | |
| // (including activationConstraint) decide when to activate |
Why it matters? ⭐
The current activator explicitly calls onActivation on pointer down which forces immediate activation and indeed bypasses the PointerSensor's activationConstraint (distance: 10) supplied when creating the sensor. In dnd-kit the handler should return true to indicate the event is a potential activation and let the sensor's own logic (including distance threshold) decide when to call onActivation. The suggested change fixes a real logic bug that causes accidental drags when clicking tabs.
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** superset-frontend/src/dashboard/components/gridComponents/TabsRenderer/TabsRenderer.tsx
**Line:** 57:64
**Comment:**
*Logic Error: The custom `PointerSensor.activators` handler calls `onActivation` directly on pointer down whenever the conditions pass, which bypasses the configured `activationConstraint: { distance: 10 }` on the sensor; this means drags will start immediately instead of after the intended movement threshold, causing unintended drags when users just click tabs.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
|
CodeAnt AI finished reviewing your PR. |
github-actions
bot
added
🎪 ad53a4c 🚦 deploying
|
🎪 Showtime deployed environment on GHA for ad53a4c • Environment: http://54.218.223.66:8080 (admin/admin) |
github-actions
bot
removed
the
🎪 ad53a4c 📅 2026-01-02T11-17
|
🎪 Showtime deployed environment on GHA for b5e76cc • Environment: http://35.94.203.45:8080 (admin/admin) |
Code Review Agent Run #6af842Actionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
geido
left a comment
geido
left a comment
There was a problem hiding this comment.
The original issue was that when dragging an active tab it would not show the drag indicator. We have a few possible paths here:
- Show the drag indicator only when dragging has actually started.
- Add an additional dragging area (before or after the tab title) that would indicate to the user that dragging can be done by targeting that specific area - very common pattern.
- Accept that an active tab is also editable and never show the drag indicator (previous behavior) - acceptable but not perfect.
I think option 1 is viable and option 2 is ideal.
The change introduced in this PR seems to have an issue for which dragging would not be possible at all if you are hovering the tab text - which is definitely something we don't want.
Better ask for product feedback if you want to go with option 2 |
Yes, I believe the changes I introduced in this PR could be integrated with option 2. |
github-actions
bot
removed
🎪 b5e76cc 🚦 running
EnxDev
added
the
🎪 ⚡ showtime-trigger-start
github-actions
bot
added
🎪 b5e76cc 🚦 building
github-actions
bot
added
🎪 b5e76cc 🚦 deploying
|
🎪 Showtime deployed environment on GHA for b5e76cc • Environment: http://35.95.20.49:8080 (admin/admin) |
github-actions
bot
removed
🎪 b5e76cc 🚦 running
2 participants
User description
SUMMARY
This PR fixes a cosmetic issue in the dashboard tab reordering feature where the cursor would incorrectly show as a drag cursor when hovering over the tab title input field.
The Problem
When hovering over the input field used to edit tab names, the drag cursor would appear instead of the text cursor, even though editing was still possible. This created a confusing user experience where the visual feedback didn't match the expected behavior.
The Solution
We customize the
PointerSensor.activatorsto check if the pointer target is an interactive element (input, textarea, or contentEditable).When an interactive element is detected, drag activation is prevented, allowing the browser to show the correct text cursor and making the interaction feel more natural.
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
before-custom-tag.mp4
after-custom-tag.mp4
TESTING INSTRUCTIONS
ADDITIONAL INFORMATION
es new feature or API
CodeAnt-AI Description
Disable drag while editing tab titles to prevent accidental reorders
What Changed
Impact
✅ Fewer accidental tab reorders✅ Clearer tab title editing✅ Correct text cursor when editing tabs💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.