From c4b4db0720622eb53b268d9695f7da187b2ee2db Mon Sep 17 00:00:00 2001 From: "Guilherme L. Moraes" Date: Thu, 21 Jan 2021 13:44:17 -0300 Subject: [PATCH 1/3] fix(left-nav): resetting items expanded after close hamb. menu --- .../web-components/src/components/masthead/left-nav.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/web-components/src/components/masthead/left-nav.ts b/packages/web-components/src/components/masthead/left-nav.ts index b4b96a70677..28e8271da88 100644 --- a/packages/web-components/src/components/masthead/left-nav.ts +++ b/packages/web-components/src/components/masthead/left-nav.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020 + * Copyright IBM Corp. 2020, 2021 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -116,8 +116,12 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) { const { expanded, _startSentinelNode: startSentinelNode, _endSentinelNode: endSentinelNode } = this; if (expanded) { this._hFocusWrap = focuswrap(this.shadowRoot!, [startSentinelNode, endSentinelNode]); - } else if (this._hFocusWrap) { - this._hFocusWrap = this._hFocusWrap.release(); + } else { + this.querySelectorAll('[expanded]').forEach(ddsLeftNavMenu => ddsLeftNavMenu.removeAttribute('expanded')); + + if (this._hFocusWrap) { + this._hFocusWrap = this._hFocusWrap.release(); + } } } } From e5cf504856b59ee2e71feacad4d308e162aaf9e7 Mon Sep 17 00:00:00 2001 From: "Guilherme L. Moraes" Date: Fri, 22 Jan 2021 10:25:09 -0300 Subject: [PATCH 2/3] fix(left-nav): new getter for items expanded and typed LeftNavMenuItem --- .../src/components/masthead/left-nav.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/web-components/src/components/masthead/left-nav.ts b/packages/web-components/src/components/masthead/left-nav.ts index 28e8271da88..ed51e90f053 100644 --- a/packages/web-components/src/components/masthead/left-nav.ts +++ b/packages/web-components/src/components/masthead/left-nav.ts @@ -20,6 +20,7 @@ import Handle from '../../globals/internal/handle'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; import DDSLeftNavOverlay from './left-nav-overlay'; import styles from './masthead.scss'; +import DDSLeftNavMenu from './left-nav-menu'; const { prefix } = settings; const { stablePrefix: ddsPrefix } = ddsSettings; @@ -117,7 +118,9 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) { if (expanded) { this._hFocusWrap = focuswrap(this.shadowRoot!, [startSentinelNode, endSentinelNode]); } else { - this.querySelectorAll('[expanded]').forEach(ddsLeftNavMenu => ddsLeftNavMenu.removeAttribute('expanded')); + this.querySelectorAll('[expanded]').forEach(ddsLeftNavMenu => + (ddsLeftNavMenu as DDSLeftNavMenu).removeAttribute('expanded') + ); if (this._hFocusWrap) { this._hFocusWrap = this._hFocusWrap.release(); @@ -148,6 +151,13 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) { return `${ddsPrefix}-left-nav-item,${ddsPrefix}-left-nav-menu,${ddsPrefix}-left-nav-menu-item`; } + /** + * A selector that will return expanded nav menus. + */ + static get selectorNavItemsExpanded() { + return `${ddsPrefix}-left-nav-menu[expanded]`; + } + /** * A selector selecting tabbable nodes. */ From e289f98dec1f90bb271cb76c9db64a8b67587a76 Mon Sep 17 00:00:00 2001 From: "Guilherme L. Moraes" Date: Fri, 22 Jan 2021 12:35:53 -0300 Subject: [PATCH 3/3] fix(left-nav): updating typed DDSLeftNavMenu --- .../web-components/src/components/masthead/left-nav.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/web-components/src/components/masthead/left-nav.ts b/packages/web-components/src/components/masthead/left-nav.ts index ed51e90f053..caf90c06cfc 100644 --- a/packages/web-components/src/components/masthead/left-nav.ts +++ b/packages/web-components/src/components/masthead/left-nav.ts @@ -118,9 +118,11 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) { if (expanded) { this._hFocusWrap = focuswrap(this.shadowRoot!, [startSentinelNode, endSentinelNode]); } else { - this.querySelectorAll('[expanded]').forEach(ddsLeftNavMenu => - (ddsLeftNavMenu as DDSLeftNavMenu).removeAttribute('expanded') - ); + const { selectorNavItemsExpanded } = this.constructor as typeof DDSLeftNav; + + this.querySelectorAll(selectorNavItemsExpanded).forEach(ddsLeftNavMenu => { + (ddsLeftNavMenu as DDSLeftNavMenu).expanded = false; + }); if (this._hFocusWrap) { this._hFocusWrap = this._hFocusWrap.release();