From e4cb6fac380fe0c14d7133310b7ed7d5d5ecd1d2 Mon Sep 17 00:00:00 2001
From: Sergii Pavlenko <sergii.pavlenko.v@gmail.com>
Date: Wed, 9 Feb 2022 11:39:36 +0200
Subject: [PATCH] EWPP-1849: Fix javascript for contextual navigation pattern.

---
 .../context_nav/js/contextual_navigation.js   | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/templates/patterns/context_nav/js/contextual_navigation.js b/templates/patterns/context_nav/js/contextual_navigation.js
index 402fce636d..85673849ce 100644
--- a/templates/patterns/context_nav/js/contextual_navigation.js
+++ b/templates/patterns/context_nav/js/contextual_navigation.js
@@ -35,31 +35,37 @@
    * @namespace
    */
   Drupal.contextualNavigation = {
-
     // Selector for list navigation element.
     listSelector: '[data-ecl-contextual-navigation-list]',
     // Selector for more item element.
     moreItemSelector: '[data-ecl-contextual-navigation-more]',
-
+    // Selector for wrapper of more item element.
+    moreItemWrapperSelector: '.ecl-contextual-navigation__item--more',
 
     initialize: function (element) {
       var list = element.querySelector(this.listSelector);
       if (list) {
-        list
-          .querySelector(this.moreItemSelector)
-          .addEventListener('click', this.handleClickOnMore);
+        var moreItem = list.querySelector(this.moreItemSelector);
+        if (moreItem) {
+          moreItem.addEventListener('click', this.handleClickOnMore);
+          moreItem.list = list;
+          moreItem.wrapper = list.querySelector(this.moreItemWrapperSelector);
+        }
       }
     },
     handleClickOnMore: function () {
-      if (this.parentNode && this.parentNode.parentNode) {
-        this.parentNode.parentNode.setAttribute('aria-expanded', 'true');
-        this.parentNode.parentNode.removeChild(this.parentNode);
+      if (this.list) {
+        this.list.setAttribute('aria-expanded', 'true');
+        if (this.wrapper) {
+          this.wrapper.parentNode.removeChild(this.wrapper);
+        }
       }
     },
     destroy: function (element) {
-      element
-        .querySelector(this.moreItemSelector)
-        .removeEventListener('click', this.handleClickOnMore);
+      var moreItem = element.querySelector(this.moreItemSelector);
+      if (moreItem) {
+        moreItem.removeEventListener('click', this.handleClickOnMore);
+      }
     }
   }
 })(Drupal);