About this question
I want to override the behavior of the ESC key in my LWC while a modal is being displayed. Default behavior passes the ESC key down to the calling component and closes both the modal and that component. I can trap the ESC in the modal with this code:
@track openModal = false; connectedCallback() { this.template.addEventListener('keydown', event => { var keycode = event.code; console.log('keycode',keycode); if(keycode == 'Escape'){ event.preventDefault(); event.stopImmediatePropagation(); } }, true); } showModal() { this.openModal = true; } closeModal() { this.openModal = false; }HTML
<!-- =============== Information Modal =============== --><!-- Header Section --><!-- Body Section -->Information Screen for {bannerLabel}
<!-- Footer Section -->{attribute.label}{attribute.helpText}
Once I've trapped the ESC key, I want to close the modal. I'm not sure how to make that happen.
How to trap esc keycode in a model?