https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43524 Bug ID: 43524 Summary: Vue modals should not close on Escape while focus is inside a form control Initiative type: --- Sponsorship --- status: Product: Koha Version: Main Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: Staff interface Assignee: koha-bugs@lists.koha-community.org Reporter: martin.renvoize@openfifth.co.uk QA Contact: testopia@bugs.koha-community.org CC: gmcharlt@gmail.com Target Milestone: --- This bug proposes generalizing an improvement made on bug 41129 (the Vue rewrite of the booking modal) to all Vue-based modals in the staff interface that contain a form or other interactive elements. Currently, Vue modals built on Bootstrap's modal component (role="dialog", keyboard: true by default) close immediately on Escape regardless of where focus is. This means a librarian who presses Escape to, say, close an open dropdown, clear an autocomplete, or back out of an input while editing a form loses the whole modal (and any unsaved data in it) instead of the smaller, expected interaction. On bug 41129, BookingModal.vue and BookingCalendar.vue were given their own Escape handling: the modal takes over "keyboard: false" on the Bootstrap instance and, in a captured keydown handler, checks whether the event target is an editing control (input, select, textarea, [contenteditable], or a v-select). If it is, the first Escape just moves focus back to the modal container rather than closing; a second Escape (now with focus outside any control) closes it. A focusout handler also recovers focus to the modal if a control blurs to document.body, so Escape keeps working reliably even after that. This logic currently lives only in BookingModal.vue/BookingCalendar.vue. Other Vue modals in the codebase -- the shared Dialog.vue component (confirmation/warning/component dialogs used throughout the staff interface), EHoldingsEBSCOPackageAgreements.vue, and PatronSelfRenewal.vue -- still rely on Bootstrap's default behaviour and close on the first Escape no matter what has focus. This bug asks to extract the pattern from bug 41129 into a shared, reusable piece (e.g. a composable such as useModalEscape, or logic folded into a common modal wrapper) so any Vue-based modal containing a form or other interactive elements gets the safer step-out-first Escape behaviour for free. Test plan: 1. Open a Vue-based modal containing a form (e.g. the booking modal on bug 41129, or Dialog.vue's confirmation dialog with inputs). 2. Focus a text input, select, or v-select inside the form. 3. Press Escape. Expected: focus steps out of the control (back to the modal) without closing it. 4. Press Escape again. Expected: the modal closes. 5. Confirm the same reusable behaviour is available/applied to modals outside the booking workflow, not re-implemented per component. See bug 41129 (comments "Own Escape handling in the booking modal" and "Keep focus inside the modal after a blur") for the reference implementation. -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.