Close any Metronic Drawer after Escape key pressed
Hi keenthemes,
I'm struglling with this issue.
I would like to whatever the drawer that is on focus, if I press Escape key, the drawer will hide/close automatically,
NB : Even if there's many drawers open,(eg: 1 from left, when you click on a link inside this drawer a 2 drawer will open from the left, and you click on a link on this drawer, a 3 rd drawer will open in right. when you press Escape key it would close/hide this 3 rd drawer, if you then press Escape again it would close hide the 2nd drawer, if you click on the Escape again, it will hide/close the 1 st Drawer)
Hope you got the point.
I manage to do it with modals by using autofocus in modal div, but I am fighting to make it work with drawers.
Thank you so much.
Replies (4)
This option is already implemened in Bootstrap 5.2 offcanvas (Think that's where KT Drawer came fr) https://getbootstrap.com/docs/5.0/components/offcanvas/
just by pressing Escape key the offcanvas close/hide
Hi,
We will add this option in the next update. In the meantime please use the below changes to implement this.
1. Add the below function after KTDrawer.handleShow in src/js/components/drawer.js:
// Handle escape key press
KTDrawer.handleEscapeKey = function() {
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
//if esc key was not pressed in combination with ctrl or alt or shift
const isNotCombinedKey = !(event.ctrlKey || event.altKey || event.shiftKey);
if (isNotCombinedKey) {
var elements = document.querySelectorAll(".drawer-on[data-kt-drawer="true"]:not([data-kt-drawer-escape="false"])");
var drawer;
if ( elements && elements.length > 0 ) {
for (var i = 0, len = elements.length; i < len; i++) {
drawer = KTDrawer.getInstance(elements[i]);
if (drawer.isShown()) {
drawer.hide();
}
}
}
}
}
});
}2. Add
KTDrawer.handleEscapeKey(); line in KTDrawer.init function.3. Recompile the assets.
4. No changes are required in HTML.
Regards.
Hi Sean,
thank you for the tips, it is gonna be a big pluf the Metonic UX.
Do you have any ETA for the net update ??
Thank you.
Hi,
You are most welcome! We are working on the next update, which should be out in the coming weeks.
Regards.
React Dev Vacancy
