fix(modal): require pointerdown intent before backdrop dismiss

[desmondinho]

Description

Closes #304
Closes #306

LumexModal decided whether a click hit the backdrop by comparing the click's clientX/Y against the dialog's bounding rect. That check misfires whenever a click bubbles up from inside the dialog with coordinates reported outside the rect:

• Modal closes unexpectedly when releasing the mouse outside after selecting text in a Textbox #304 — User mousedowns inside a LumexTextbox, drags to select text, releases over the backdrop. The browser dispatches a click on the dialog (closest common ancestor) with clientX/Y at the mouseup position, outside the rect → modal closes mid-text-selection.
• Modal closes unexpectedly when clicking on select within the modal #306 — User clicks a native <select> inside the modal. The bubbled click arrives at the dialog with clientX/Y outside the rect (option panel coords, or synthesized (0, 0) for keyboard-initiated commit) → modal closes despite the pointer never targeting the backdrop.

What's been done?

• In src/LumexUI/wwwroot/js/components/modal.js, replace the bounding-rect coordinate check with the standard "mousedown intent" pattern: only dismiss when both the pointerdown and the click target the dialog element itself. The native <dialog>::backdrop is a pseudo-element of the dialog, so a real backdrop press surfaces as event.target === dialog; any interaction that originates inside the dialog content has a different target on pointerdown and is ignored.
• Tracked the new listener in the instances map and removed it in destroy to keep cleanup symmetric.

No JS-level test infrastructure exists in the repo, so the change is not covered by automated tests. The existing ModalTests (which mock modal.js) still pass. Manual verification of both repros recommended.

Checklist

• My code follows the project's coding style and guidelines.
• I have included inline docs for my changes, where applicable.
• I have added, updated or removed tests according to my changes.
• All tests are passing.
• There's an open issue for the PR that I am making.

Additional Notes

Manual repro steps to verify the fix:

• Modal closes unexpectedly when releasing the mouse outside after selecting text in a Textbox #304 — Open any modal containing a LumexTextbox, click and drag inside the textbox to select text, release the mouse outside the modal. The modal should remain open.
• Modal closes unexpectedly when clicking on select within the modal #306 — Open a modal containing a native <select> (e.g. Size="@ModalSize.Large", ScrollBehavior="@ScrollBehavior.Inside"), click the select to open its picker. The modal should remain open while interacting with the picker.

Summary by CodeRabbit

• Bug Fixes
  • Improved modal dismissal behavior when interacting with the backdrop for more reliable closing interactions.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4081dcbf-74ba-43c8-90c3-03619f30d09d

📥 Commits

Reviewing files that changed from the base of the PR and between d333222 and 25dc310.

📒 Files selected for processing (1)

• src/LumexUI/wwwroot/js/components/modal.js

---

📝 Walkthrough

Walkthrough

Modal dismissal detection shifts from coordinate-based bounding-rectangle checking to event-sequence tracking. A pointerdown handler sets a flag when triggered on the dialog element; a click handler then checks this flag before closing. The pointerdown listener is registered during initialization and properly removed during cleanup.

Changes

Modal Backdrop Detection

Layer / File(s)	Summary
Event Sequence Logic src/LumexUI/wwwroot/js/components/modal.js	initialize() replaces bounding-rectangle logic with a pointerdownHandler that sets a pointerdownOnBackdrop flag and a clickHandler that checks this flag before closing the modal.
Listener Registration src/LumexUI/wwwroot/js/components/modal.js	The pointerdown listener is registered on the dialog element and pointerdownHandler is stored in the instances map.
Listener Cleanup src/LumexUI/wwwroot/js/components/modal.js	destroy() removes the pointerdown event listener during teardown.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

A modal so modal, now smarter and sleek,
Detects where you poke with a click-sequence technique,
No bounding boxes for this fancy display,
Just pointerdown flags to keep clicks at bay! 🐰✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and specifically describes the main change: implementing a pointerdown intent check before backdrop dismissal in the modal component.
Description check	✅ Passed	The description is comprehensive and follows the template structure with problem context, detailed changes, and complete checklist; only the automated tests item is unchecked (acknowledged as not applicable due to missing JS test infrastructure).
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/modal-closes-on-pointer-drag-or-select

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 93.03%. Comparing base (19b89dc) to head (25dc310).
⚠️ Report is 179 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #308      +/-   ##
==========================================
- Coverage   96.95%   93.03%   -3.92%     
==========================================
  Files          70      166      +96     
  Lines        1542     2756    +1214     
  Branches      150      405     +255     
==========================================
+ Hits         1495     2564    +1069     
- Misses         28      100      +72     
- Partials       19       92      +73     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.