Issue #3426391 by Grimreaper: Override drupal.active-link library

assets/js/misc/active-link.js

+/**
+ * @file
+ * Attaches behaviors for Drupal's active link marking.
+ */
+
+((Drupal, drupalSettings) => {
+  const activeClass = 'active';
+
+  /**
+   * Append active class.
+   *
+   * The link is only active if its path corresponds to the current path, the
+   * language of the linked path is equal to the current language, and if the
+   * query parameters of the link equal those of the current request, since the
+   * same request with different query parameters may yield a different page
+   * (e.g. pagers, exposed View filters).
+   *
+   * Does not discriminate based on element type, so allows you to set the
+   * active class on any element: a, li…
+   *
+   * @type {Drupal~behavior}
+   */
+  Drupal.behaviors.activeLinks = {
+    attach(context) {
+      // Start by finding all potentially active links.
+      const { path } = drupalSettings;
+      const queryString = JSON.stringify(path.currentQuery);
+      const querySelector = path.currentQuery
+        ? `[data-drupal-link-query='${queryString}']`
+        : ':not([data-drupal-link-query])';
+      const originalSelectors = [
+        `[data-drupal-link-system-path="${path.currentPath}"]`,
+      ];
+      let selectors;
+
+      // If this is the front page, we have to check for the <front> path as
+      // well.
+      if (path.isFront) {
+        originalSelectors.push('[data-drupal-link-system-path="<front>"]');
+      }
+
+      // Add language filtering.
+      selectors = [].concat(
+        // Links without any hreflang attributes (most of them).
+        originalSelectors.map((selector) => `${selector}:not([hreflang])`),
+        // Links with hreflang equals to the current language.
+        originalSelectors.map(
+          (selector) => `${selector}[hreflang="${path.currentLanguage}"]`,
+        ),
+      );
+
+      // Add query string selector for pagers, exposed filters.
+      selectors = selectors.map((current) => current + querySelector);
+
+      // Query the DOM.
+      const activeLinks = context.querySelectorAll(selectors.join(','));
+      const il = activeLinks.length;
+      for (let i = 0; i < il; i++) {
+        activeLinks[i].classList.add(activeClass);
+      }
+    },
+    detach(context, settings, trigger) {
+      if (trigger === 'unload') {
+        const activeLinks = context.querySelectorAll(
+          `[data-drupal-link-system-path].${activeClass}`,
+        );
+        const il = activeLinks.length;
+        for (let i = 0; i < il; i++) {
+          activeLinks[i].classList.remove(activeClass);
+        }
+      }
+    },
+  };
+})(Drupal, drupalSettings);

src/HookHandler/PreprocessMenu.php

@@ -4,7 +4,6 @@ declare(strict_types=1);
 
 namespace Drupal\ui_suite_bootstrap\HookHandler;
 
-use Drupal\Core\Template\Attribute;
 use Drupal\ui_patterns_settings\Plugin\UiPatterns\SettingType\LinksSettingType;
 
 /**
@@ -20,33 +19,6 @@ class PreprocessMenu {
    */
   public function preprocess(array &$variables): void {
     $variables['preprocessed_items'] = LinksSettingType::normalize($variables['items']);
-    $this->addActiveClass($variables['preprocessed_items']);
-  }
-
-  /**
-   * Add active class on link if in active trail.
-   *
-   * @param array $items
-   *   The items to process.
-   */
-  protected function addActiveClass(array &$items): void {
-    foreach ($items as &$item) {
-      if (isset($item['in_active_trail']) && $item['in_active_trail']) {
-        if (isset($item['link_attributes'])) {
-          $item['link_attributes']->addClass('active');
-        }
-        else {
-          $item['link_attributes'] = new Attribute([
-            'class' => [
-              'active',
-            ],
-          ]);
-        }
-      }
-      if (isset($item['below']) && $item['below']) {
-        $this->addActiveClass($item['below']);
-      }
-    }
   }
 
 }

ui_suite_bootstrap.info.yml

@@ -6,7 +6,7 @@ base theme: false
 dependencies:
   - layout_options:layout_options
   - ui_patterns:ui_patterns_library
-  - ui_patterns_settings:ui_patterns_settings (>=8.x-2.2-alpha1 || >=8.x-2.2 || >=3.0)
+  - ui_patterns_settings:ui_patterns_settings (>=8.x-2.2 || >=3.0)
   - ui_styles:ui_styles
 
 regions:
@@ -29,6 +29,9 @@ libraries:
   - ui_suite_bootstrap/form
 
 libraries-override:
+  core/drupal.active-link:
+    js:
+      misc/active-link.js: assets/js/misc/active-link.js
   core/drupal.dropbutton: false
   text/drupal.text: ui_suite_bootstrap/drupal.text
   clientside_validation_jquery/cv.jquery.ife: false