Keyboard events propagate to other components when lightGallery is open

[unitedworx]

Hi there

it seems that then i press the arrow buttons to navigate lightgallery when its open the keyboard evens will propagate to another gallery component which sits behind lightgallery and will move that gallery as well.

Is there a way to tell lightGallerry to stop propagation on those events?

I know i can disable the keyboard events on the other gallery component and manually bind the arrow keys fro it so i can check if lightgallery is open not to fire the events, however this is ugly!

If there is a way to tell lightGallery to stop propagating the keyboard events when its open it will be a clean and nice solution.

[unitedworx]

I utilized events to disable keyboard navigation on the other slider when opening lightGallery and solved my problem. Clean enough solution!

keep up the good work

[sachinchoolur]

Hey @unitedworx,

I'm sorry, somehow I missed this at all. Yes, I think we can prevent the propagation except for inline galleryies. I'll make the changes. Thank you for reporting this issue

[neurot1k]

The issue, at least in my case, is that none of the DOM elements within lightGallery have focus when it opens. Keyboard events originate from the element which has focus, so depending on what the user interacted last with on my site the event was bubbling up through the DOM from an unexpected place and another event handler was being called first.

In case anyone has the same issue my workaround for this is to focus one of the buttons in the toolbar when lightGallery opens and attach an event hander to the container to handle keyboard events myself.

this.lg = lightGallery(this.base, {
    keyPress: false,
    // other settings
});
this.base.addEventListener('lgAfterOpen', this.onOpen);

onOpen = () => {
    // Ensure a DOM element within lightgallery has focus so that keyboard events bubble through the container
    // element where our event listener is attached.
    const buttons = this.lg.$toolbar.firstElement.getElementsByTagName('button');
    if (buttons.length) {
        buttons[0].focus();
        this.lg.$container.firstElement.addEventListener('keydown', this.onKeyDown);
    }
};

onKeyDown = (e) => {
    e.stopPropagation();
    switch (e.keyCode) {
        case 27:  // Esc
            return this.lg.closeGallery();
        case 35:  // End
            return this.lg.slide(this.props.images.length - 1);
        case 36:  // Home
            return this.lg.slide(0);
        case 37:  // Left
            return this.lg.goToPrevSlide();
        case 39:  // Right
            return this.lg.goToNextSlide();
      }
};