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: [email protected]
Reporter: [email protected]
QA Contact: [email protected]
CC: [email protected]
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.
_______________________________________________
Koha-bugs mailing list -- [email protected]
To unsubscribe send an email to [email protected]
website : http://www.koha-community.org/
git : http://git.koha-community.org/
bugs : http://bugs.koha-community.org/
