Light
Dark
System
Ask  Question

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.
user
riterix 3 days ago
Bootstrap 5 Metronic
1 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

user
riterix 3 days ago
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
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle