From 2cf44c236d586ca07f03744a3df8ffeff425b8f7 Mon Sep 17 00:00:00 2001 From: Emiel Beinema Date: Mon, 15 Apr 2019 12:16:48 +0200 Subject: [PATCH 1/2] Use querySelector on container for showMenuPanel --- src/js/controls.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/controls.js b/src/js/controls.js index 78d3144f..104f5c95 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -1191,7 +1191,7 @@ const controls = { // Show a panel in the menu showMenuPanel(type = '', tabFocus = false) { - const target = document.getElementById(`plyr-settings-${this.id}-${type}`); + const target = this.elements.container.querySelector(`#plyr-settings-${this.id}-${type}`); // Nothing to show, bail if (!is.element(target)) { From a91652287b10237552b6b1ac87c8286aff4f583d Mon Sep 17 00:00:00 2001 From: Emiel Beinema Date: Mon, 15 Apr 2019 12:17:10 +0200 Subject: [PATCH 2/2] Don't close menu on click in menu in webcomponent --- src/js/controls.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/js/controls.js b/src/js/controls.js index 104f5c95..275ffb3f 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -1138,7 +1138,9 @@ const controls = { } else if (is.keyboardEvent(input) && input.which === 27) { show = false; } else if (is.event(input)) { - const isMenuItem = popup.contains(input.target); + // If Plyr is in a shadowDOM, the event target is set to the component, instead of the + // element in the shadowDOM. The path, however, is complete. + const isMenuItem = popup.contains(input.path[0]); // If the click was inside the menu or if the click // wasn't the button or menu item and we're trying to