fix(dashboard-tabs): disable drag on input fields during tab reorder

[EnxDev]

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.activators to 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

before-custom-tag.mp4

• After

after-custom-tag.mp4

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API
  es new feature or API
• Removes existing feature or API

---

CodeAnt-AI Description

Disable drag while editing tab titles to prevent accidental reorders

What Changed

• Drag-and-drop is disabled when the user starts a pointer interaction on an input, textarea, or any content-editable element inside a tab, so clicking to edit a tab name no longer triggers tab reordering
• The tab title edit field shows the correct text cursor and accepts typing without initiating a drag
• Removed forcing the tabs container to full height, restoring the previous sizing behavior

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:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

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:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

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.

[codeant-ai-for-open-source]

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 ·
Reddit ·
LinkedIn

[bito-code-review]

Code Review Agent Run #f841b1

Actionable Suggestions - 0

Review Details

• Files reviewed - 1 · Commit Range: ad53a4c..ad53a4c

  • superset-frontend/src/dashboard/components/gridComponents/TabsRenderer/TabsRenderer.tsx
• Files skipped - 0
• Tools

  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at [email protected].

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[codeant-ai-for-open-source]

Sequence Diagram

Shows 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

Loading

---

Generated by CodeAnt AI

[codeant-ai-for-open-source]

Nitpicks 🔍

🔒 No security issues identified

⚡ Recommended areas for review Global Mutation The PR mutates PointerSensor.activators at module initialization. This changes dnd-kit global behavior for all consumers and may have unintended side effects across the app or other DnD contexts. Prefer passing custom activators to the specific sensor instance (via useSensor) instead of mutating the library export. Import-time Side Effects The active code runs at module import time. If this file is imported in SSR or other contexts unexpectedly, it produces side effects by overriding the sensor behavior globally. Consider scoping the override to client-side init or the component lifecycle. DOM Traversal Safety isInteractiveElement uses recursion and assumes the node is an HTMLElement with a tagName. event.target may be a text node or non-HTMLElement (SVG, etc.). The recursive implementation could cause a stack overflow on very deep trees and may throw when encountering non-element nodes. Use an iterative traversal, guard node types, and stop at document/body.

[github-actions]

🎪 Showtime is building environment on GHA for ad53a4c

[codeant-ai-for-open-source]

CodeAnt AI finished reviewing your PR.

[github-actions]

🎪 Showtime deployed environment on GHA for ad53a4c

• Environment: http://54.218.223.66:8080 (admin/admin)
• Lifetime: 48h auto-cleanup
• Updates: New commits create fresh environments automatically

[github-actions]

🎪 Showtime is building environment on GHA for b5e76cc

[github-actions]

🎪 Showtime deployed environment on GHA for b5e76cc

• Environment: http://35.95.20.49:8080 (admin/admin)
• Lifetime: 48h auto-cleanup
• Updates: New commits create fresh environments automatically

[codeant-ai-for-open-source]

CodeAnt AI is running Incremental review

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[netlify]

✅ Deploy Preview for superset-docs-preview ready!

Name	Link
🔨 Latest commit	624b5ec
🔍 Latest deploy log	https://app.netlify.com/projects/superset-docs-preview/deploys/69830653a4081a000881cd3d
😎 Deploy Preview	https://deploy-preview-36889--superset-docs-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[codeant-ai-for-open-source]

CodeAnt AI is running Incremental review

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai-for-open-source]

Sequence Diagram

Shows how the PR customizes the PointerSensor activators to prevent drag activation when the user interacts with editable tab title fields, preserving normal text editing instead of starting a tab reorder.

sequenceDiagram
    participant User
    participant Browser
    participant PointerSensor
    participant DndContext
    participant TabsRenderer

    User->>Browser: pointerdown on tab title (target)
    Browser->>PointerSensor: onPointerDown event (nativeEvent)
    PointerSensor->>PointerSensor: isInteractiveElement(target)?
    alt target is input/textarea/contentEditable
        PointerSensor-->>Browser: return false (no activation)
        Browser-->>User: show text cursor / allow editing
    else non-interactive target
        PointerSensor->>DndContext: onActivation -> start drag
        DndContext-->>TabsRenderer: onDragStart -> setActiveId
        DndContext->>DndContext: drag and drop occurs
        DndContext-->>TabsRenderer: onDragEnd -> call onTabsReorder (if moved)

Loading

---

Generated by CodeAnt AI

[codeant-ai-for-open-source]

CodeAnt AI Incremental review completed.

[codeant-ai-for-open-source]

Sequence Diagram

The PR customizes PointerSensor activation to detect interactive elements (input/textarea/contentEditable) and prevent drag activation when the user clicks them, so editing tab titles shows the text cursor instead of starting a drag.

sequenceDiagram
    participant User
    participant TabsUI as Tabs Renderer
    participant PointerSensor
    participant DnD as DndContext
    participant Browser

    User->>TabsUI: Pointer down on tab title
    TabsUI->>PointerSensor: Check activation target
    PointerSensor->>PointerSensor: Is target input/textarea/contentEditable?
    alt Target is interactive
        PointerSensor-->>TabsUI: Prevent drag activation
        TabsUI-->>Browser: Let browser show text cursor / allow editing
        Browser-->>User: Text cursor, edit title
    else Target not interactive
        PointerSensor-->>Dnd: Activate drag
        Dnd-->>TabsUI: Reorder tabs (update state)
        TabsUI-->>User: Tab reordered
    end

Loading

---

Generated by CodeAnt AI

[codeant-ai-for-open-source]

Sequence Diagram

The PR customizes PointerSensor activation so pointer-down on input/textarea/contentEditable elements does not start a drag; this preserves the text cursor and allows editing, while non-interactive areas still activate drag-and-drop reordering.

sequenceDiagram
    participant User
    participant PointerSensor
    participant Browser
    participant DndContext
    participant TabsRenderer

    User->>PointerSensor: pointerDown on tab title
    PointerSensor->>PointerSensor: check target is input/textarea/contentEditable?
    alt target is interactive
        PointerSensor-->>Browser: do not activate drag (return false)
        Browser-->>User: show text cursor, allow editing
    else target is non-interactive
        PointerSensor->>DndContext: onActivation -> start drag
        DndContext->>TabsRenderer: onDragStart (set active tab)
        User->>DndContext: drag & drop
        DndContext->>TabsRenderer: onDragEnd -> onTabsReorder(oldIndex, newIndex)

Loading

---

Generated by CodeAnt AI