fix(modal): DLT-3476 do not close when drag starts inside dialog and ends on backdrop

[Nina Repetto (ninarepetto)]

https://dialpad.atlassian.net/browse/DLT-3476

Obligatory GIF (super important!)

🛠️ Type Of Change

These types will increment the version number on release:

• Fix
• Feature
• Performance Improvement
• Refactor

These types will not increment the version number, but will still deploy to documentation site on release:

• Documentation
• Build system
• CI
• Style (code style changes, not css changes)
• Test
• Other (chore)

📖 Jira Ticket

https://dialpad.atlassian.net/browse/DLT-3476

📖 Description

The modal no longer closes when a user starts a click or text selection drag inside the dialog content and releases the mouse on the backdrop. A mousedown handler now tracks whether the press originated on the backdrop itself, and the click handler only closes the modal when both the mousedown and the click landed on the backdrop.

💡 Context

Previously, the modal closed on any click event whose target was the backdrop overlay, regardless of where the mouse button was first pressed. This meant that dragging to select text inside the modal and releasing outside it would unexpectedly dismiss the dialog. The fix introduces a _mousedownOnBackdrop flag: it is set to true only when mousedown fires directly on the backdrop, and the click handler gates close() on that flag. The flag is initialised to false in created() so it is always in a known state.

📝 Checklist

For all PRs:

• I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
• I have reviewed my changes.
• I have added all relevant documentation.
• I have considered the performance impact of my change.

For all Vue changes:

• I have added / updated unit tests.
• I have validated components with a screen reader.
• I have validated components keyboard navigation.

For all CSS changes:

• I have used design tokens whenever possible.
• I have considered how this change will behave on different screen sizes.
• I have visually validated my change in light and dark mode.
• I have used gap or flexbox properties for layout instead of margin whenever possible.

🔮 Next Steps

None.

📷 Screenshots / GIFs

None needed — this is a logic-only fix with no visual changes.

🔗 Sources

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: 3e9ed0b1-0862-4f94-bb95-6e4e28a0df84

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch dlt-3476-fix-modal-drag-close

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

[github-actions]

✔️ Deploy previews ready!
😎 Dialtone documentation preview: https://dialtone.dialpad.com/deploy-previews/pr-1322/
😎 Dialtone-vue preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-1322/