1

I've built a fairly simple lightning web component that shows a popover to the user. It works except for one feature. According to Salesforce's UI guidelines, the popover should get dismissed if the user pressed the escape key. I haven't been able to capture any key presses. I have an onkeydown event capture in the div that acts as the popover, and the matching handler just logs to the console that the event was fired. But nothing gets fired.

Here's the HTML of the component:

<template>
    <lightning-icon
        icon-name="standard:quotes"
        alternative-text="Tags"
        onclick={handleClick}
        class="slds-m-left_medium"
        style="cursor: pointer"
    ></lightning-icon>
    <section
        if:true={showPopover}
        class="slds-popover slds-nubbin_left-top slds-m-left_small"
        role="dialog"
        style="position: fixed"
    >
        <div class="slds-popover__body"
             onkeydown={handleKeyDown}>
            <lightning-layout class="slds-p-bottom_small">
                <lightning-layout-item size="11">
                    <header>
                        <h2>Tag Filters</h2>
                    </header>
                </lightning-layout-item>
                <lightning-layout-item size="1">
                    <lightning-icon
                        icon-name="utility:close"
                        alternative-text="Close"
                        size="xx-small"
                        onclick={handleClick}
                    ></lightning-icon>
                </lightning-layout-item>
            </lightning-layout>
            <template for:each={tags} for:item="tag">
                <lightning-badge
                    key={tag.name}
                    label={tag.name}
                    class={tag.class}
                    onclick={handleTagClick}
                    style="cursor: pointer"
                ></lightning-badge>
            </template>
        </div>
    </section>
</template>

To give a bit more context, this is within a Lightning App that uses a view component. That in turn shows one of several sub-views. This subview then creates the layout, including a reusable component that shows a header, has a slot for widgets to appear above a datatable, a search field, and the datatable. The above component is being placed in the slot.

Lightning App
|--Master view
|----Conditional sub view
|------Reusable datatable view
|--------header text
|--------slot
|----------popover component that I want to capture ESC key
!--------search field
|--------datatable

How can I capture the key presses to dismiss the popover when the user presses ESC?

2

The important thing is to make sure you capture the keypress at the right place in your DOM hierarchy, e.g. on the section, using something like onkeyup={keyboardHandler} and do something like the following in the callback function:

keyboardHandler(event) {
    event.stopPropagation();

    if (event.key === "Escape" || event.key === "Esc") {
        this.showPopover = false;
    }
}
6
  • I changed the above to have onkeydown={handleKeyDown} in the section tag and added event.stopPropagation(); to the handleKeyDown method. No change.
    – Chuck
    Aug 23 at 17:03
  • Perhaps you have a DOM element that has focus at a lower level that is consuming your events before they arrive at your "overlay"?
    – Phil W
    Aug 23 at 17:05
  • Perhaps, but it's not my code. A global search for onkey shows only the line above.
    – Chuck
    Aug 23 at 17:07
  • 1
    All I can say is that we use basically exactly what I've outlined above and it works for us. You need to try debugging the page using the browser's inspector. It'll be cryptic but with care and some luck you can track down what's consuming the event and preventing you from receiving it.
    – Phil W
    Aug 23 at 17:09
  • Yea, that's what I've been doing. I see that the page (it's a Lightning App) has five other keydown captures. Some of the code is minified (even with org having debug mode on), and I'm trying to get through it. None of it seems to be stopping propagation, though (unless the call to that is being minified). I'll circle around on it, since everything else is working.
    – Chuck
    Aug 23 at 17:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.