From 2b6e4ce5990100ac8a84e83362ad8997adbc26cc Mon Sep 17 00:00:00 2001 From: BatJan <1932158+BatJan@users.noreply.github.com> Date: Tue, 19 Oct 2021 11:24:16 +0200 Subject: [PATCH] Turn nodelist into an array and filter out elements whose parent, grandparents etc. has a .ng-hide class --- .../directives/components/forms/umbfocuslock.directive.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbfocuslock.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbfocuslock.directive.js index e1639dde26..9bd1909960 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbfocuslock.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbfocuslock.directive.js @@ -35,9 +35,6 @@ // List of elements that can be focusable within the focus lock var focusableElementsSelector = '[role="button"], a[href]:not([disabled]):not(.ng-hide), button:not([disabled]):not(.ng-hide), textarea:not([disabled]):not(.ng-hide), input:not([disabled]):not(.ng-hide), select:not([disabled]):not(.ng-hide)'; - // Grab the body element so we can add the tabbing class on it when needed - var bodyElement = document.querySelector('body'); - function getDomNodes(){ infiniteEditorsWrapper = document.querySelector('.umb-editors'); if(infiniteEditorsWrapper) { @@ -47,7 +44,10 @@ function getFocusableElements(targetElm) { var elm = targetElm ? targetElm : target; - focusableElements = elm.querySelectorAll(focusableElementsSelector); + + // Filter out elements that are children of parents with the .ng-hide class + focusableElements = [...elm.querySelectorAll(focusableElementsSelector)].filter(elm => !elm.closest('.ng-hide')); + // Set first and last focusable elements firstFocusableElement = focusableElements[0]; lastFocusableElement = focusableElements[focusableElements.length - 1];