From d22aafc350ee97f17d11757342b22322d3ddee49 Mon Sep 17 00:00:00 2001
From: Edouard Cunibil <edouard@happyculture.coop>
Date: Wed, 12 Mar 2025 16:49:13 +0100
Subject: [PATCH 1/2] Issue #2845319 by bnjmnm, juanolalla, douggreen,
gauravvvv, _utsavsharma, akram khan, ankithashetty, neograph734, jungle,
nitin shrivastava, danylevskyi, imot3k, artusamak, DuaelFr: The highlighting
of the active menu-link does not respect query strings and fragment
identifiers
---
.../ActiveLinkResponseFilter.php | 19 ++++++------
core/misc/active-link.js | 30 +++++++++----------
2 files changed, 24 insertions(+), 25 deletions(-)
diff --git a/core/lib/Drupal/Core/EventSubscriber/ActiveLinkResponseFilter.php b/core/lib/Drupal/Core/EventSubscriber/ActiveLinkResponseFilter.php
index 28ad2c044511..78a09a563a5b 100644
--- a/core/lib/Drupal/Core/EventSubscriber/ActiveLinkResponseFilter.php
+++ b/core/lib/Drupal/Core/EventSubscriber/ActiveLinkResponseFilter.php
@@ -204,16 +204,15 @@ public static function setLinkActiveClass($html_markup, $current_path, $is_front
}
// The query parameters of an active link are equal to the current
// parameters.
- if ($add_active) {
- if ($query) {
- if (!$node->hasAttribute('data-drupal-link-query') || $node->getAttribute('data-drupal-link-query') !== Json::encode($query)) {
- $add_active = FALSE;
- }
- }
- else {
- if ($node->hasAttribute('data-drupal-link-query')) {
- $add_active = FALSE;
- }
+ if ($add_active && $node->hasAttribute('data-drupal-link-query')) {
+ $query_match = empty(array_filter(
+ Json::decode($node->getAttribute('data-drupal-link-query')),
+ fn ($value, $key) => $value !== ($query[$key] ?? NULL),
+ ARRAY_FILTER_USE_BOTH
+ ));
+
+ if (!$query_match) {
+ $add_active = FALSE;
}
}
diff --git a/core/misc/active-link.js b/core/misc/active-link.js
index 464e9a4044f0..3ac269d73928 100644
--- a/core/misc/active-link.js
+++ b/core/misc/active-link.js
@@ -22,14 +22,9 @@
attach(context) {
// Start by finding all potentially active links.
const path = drupalSettings.path;
- const queryString = JSON.stringify(path.currentQuery);
- const querySelector = queryString
- ? `[data-drupal-link-query="${CSS.escape(queryString)}"]`
- : ':not([data-drupal-link-query])';
const originalSelectors = [
`[data-drupal-link-system-path="${CSS.escape(path.currentPath)}"]`,
];
- let selectors;
// If this is the front page, we have to check for the <front> path as
// well.
@@ -38,7 +33,7 @@
}
// Add language filtering.
- selectors = [].concat(
+ const selectors = [].concat(
// Links without any hreflang attributes (most of them).
originalSelectors.map((selector) => `${selector}:not([hreflang])`),
// Links with hreflang equals to the current language.
@@ -47,16 +42,21 @@
),
);
- // 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('is-active');
- activeLinks[i].setAttribute('aria-current', 'page');
- }
+ context.querySelectorAll(selectors.join(',')).forEach(function (link) {
+ // Check if the link does not contain query parameters that
+ // don't match the current query.
+ const queryMatch =
+ !link.hasAttribute('data-drupal-link-query') ||
+ !Object.entries(
+ JSON.parse(link.getAttribute('data-drupal-link-query')),
+ ).find(([key, value]) => value !== (path.currentQuery[key] || null));
+
+ if (queryMatch) {
+ link.classList.add('is-active');
+ link.setAttribute('aria-current', 'page');
+ }
+ });
},
detach(context, settings, trigger) {
if (trigger === 'unload') {
--
GitLab
From 3192a03809390d575f4cfcd2ec11e6754b210ec3 Mon Sep 17 00:00:00 2001
From: Edouard Cunibil <edouard@happyculture.coop>
Date: Wed, 12 Mar 2025 16:51:31 +0100
Subject: [PATCH 2/2] Fix JS error on pages without any query string.
---
core/misc/active-link.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/core/misc/active-link.js b/core/misc/active-link.js
index 3ac269d73928..45fdcc25458f 100644
--- a/core/misc/active-link.js
+++ b/core/misc/active-link.js
@@ -22,6 +22,7 @@
attach(context) {
// Start by finding all potentially active links.
const path = drupalSettings.path;
+ path.currentQuery = path.currentQuery ?? [];
const originalSelectors = [
`[data-drupal-link-system-path="${CSS.escape(path.currentPath)}"]`,
];
--
GitLab