From 48723a09dd9367384386f84e817dc7e3b3aff132 Mon Sep 17 00:00:00 2001 From: dgtlmoon Date: Sun, 13 Sep 2026 08:25:40 +0200 Subject: [PATCH] UI - Search modal - fix Enter dismissing the form instead of searching (#4428) Pressing Enter in the search box closed the modal without running the search; you had to click Search with the mouse. Implicit form submission fires a click at the submit button, and a keyboard-synthesised click carries detail 0 and coordinates of 0,0. The backdrop-click handler only tested the coordinates against the dialog's bounding box, so 0,0 read as "outside" - it closed the dialog and blanked the input while the click was still bubbling. By the time the submit ran, `q` was empty and `required` rejected it, so nothing was searched. Ignore clicks with detail 0 - only a real pointer can hit the backdrop. Verified with Chromium against a local instance: Enter now lands on /?q=, and mouse submit, backdrop click, Escape and Enter-on-empty all still behave. Co-authored-by: Claude Opus 5 (1M context) --- changedetectionio/static/js/search-modal.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/changedetectionio/static/js/search-modal.js b/changedetectionio/static/js/search-modal.js index ac4065332..829156209 100644 --- a/changedetectionio/static/js/search-modal.js +++ b/changedetectionio/static/js/search-modal.js @@ -62,6 +62,15 @@ // Close modal when clicking the backdrop searchModal.addEventListener('click', function(e) { + // Only real pointer clicks can land on the backdrop. Keyboard-synthesised clicks + // report detail 0 and coordinates of 0,0, which the geometry test below reads as + // "outside the dialog" - and implicit form submission (Enter in the input) fires + // exactly such a click at the Search button. That closed the modal and blanked + // the input mid-dispatch, so the submit that followed hit an empty `required` + // field and was rejected: Enter appeared to just dismiss the form. + if (e.detail === 0) { + return; + } const rect = searchModal.getBoundingClientRect(); const isInDialog = ( rect.top <= e.clientY &&