From 96af62edf0e2a6f9c4b271e8693050a356b7e267 Mon Sep 17 00:00:00 2001
From: Shinuwa <git@shinuwa.fr>
Date: Wed, 7 Oct 2026 22:53:17 +0200
Subject: [PATCH] Keep filter dropdowns clickable above active filter badges

---
 DESIGN_SYSTEM.md                              |  1 +
 e2e/game-filters.spec.js                      | 37 +++++++++++++++++++
 .../design-system/attributes/_patterns.scss   |  2 +
 3 files changed, 40 insertions(+)

diff --git a/DESIGN_SYSTEM.md b/DESIGN_SYSTEM.md
index 1a9512f..529c951 100644
--- a/DESIGN_SYSTEM.md
+++ b/DESIGN_SYSTEM.md
@@ -589,6 +589,7 @@ Filtres :
 - `nds-filter-menu[data-columns="2"]` répartit les options aux libellés courts sur deux colonnes dans la largeur standard du popover, afin de compacter chaque option ;
 - les menus multi-sélection gardent les libellés visibles et affichent le nombre de critères actifs dans leur trigger ;
 - les listes des popovers de filtres prennent leur hauteur naturelle et n’ajoutent pas de défilement interne ;
+- un groupe contenant un menu ouvert passe au-dessus de la section des badges actifs pour que celle-ci n’intercepte pas les clics dans le menu ;
 - les sélecteurs de condition comme `ET / OU` ou `≥ / =` restent dans une petite surface bordée afin de les distinguer des options du menu ;
 - lorsque la condition ne concerne qu’un groupe avancé, comme les catégories Diablo IV, son sélecteur est placé dans le popover correspondant avec 12 px d’espace avant les options ;
 - toute option réduite à son icône doit utiliser le composant commun `Tooltip` et conserver un nom accessible (`aria-label`) ; l’attribut HTML `title` ne remplace pas le tooltip ;
diff --git a/e2e/game-filters.spec.js b/e2e/game-filters.spec.js
index eef991d..78e7f64 100644
--- a/e2e/game-filters.spec.js
+++ b/e2e/game-filters.spec.js
@@ -1,6 +1,43 @@
 // Rôle : vérifie les variantes horizontales compactes et avancées des filtres de jeux.
 import { test, expect } from "@playwright/test";
 
+for (const { game, category, width } of [
+  { game: "diablo4/affixes", category: "Catégories", width: 1920 },
+  { game: "diablo4/affixes", category: "Catégories", width: 900 },
+  { game: "diablo4/affixes", category: "Catégories", width: 768 },
+  { game: "aniimo/aniimos", category: "Rôles", width: 1920 }
+]) {
+  test(`${game} dropdown receives clicks over active badges at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 900 });
+    await page.goto(`/#/games/${game}`);
+    const filters = page.locator('.nds-filter-panel[data-variant="horizontal-menu"]');
+    await filters.getByRole("searchbox").fill("a");
+    const badges = filters.locator(".nds-active-filters");
+    await expect(badges).toBeVisible();
+    await filters.getByRole("button", { name: category, exact: true }).click();
+    const menu = page.getByRole("dialog", { name: new RegExp(`^${category}`) });
+    const control = category === "Catégories"
+      ? menu.getByRole("radio", { name: "Ou", exact: true })
+      : menu.getByRole("checkbox").first();
+    const controlBox = await control.boundingBox();
+    const badgesBox = await badges.boundingBox();
+    const overlapTop = Math.max(controlBox.y, badgesBox.y);
+    const overlapBottom = Math.min(controlBox.y + controlBox.height, badgesBox.y + badgesBox.height);
+    expect(overlapBottom).toBeGreaterThan(overlapTop);
+
+    await control.click({
+      position: { x: controlBox.width / 2, y: (overlapTop + overlapBottom) / 2 - controlBox.y },
+      timeout: 3000
+    });
+    if (category === "Catégories") await expect(control).toHaveAttribute("aria-checked", "true");
+    else await expect(control).toBeChecked();
+    await expect(menu).toBeVisible();
+    await page.keyboard.press("Escape");
+    await badges.getByRole("button").first().click();
+    await expect(filters.getByRole("searchbox")).toHaveValue("");
+  });
+}
+
 for (const width of [1920, 900]) {
   test(`MHW compact filters keep accessible tooltips at ${width}px`, async ({ page }) => {
     await page.setViewportSize({ width, height: 900 });
diff --git a/website/src/styles/design-system/attributes/_patterns.scss b/website/src/styles/design-system/attributes/_patterns.scss
index 52f750a..5d7db06 100644
--- a/website/src/styles/design-system/attributes/_patterns.scss
+++ b/website/src/styles/design-system/attributes/_patterns.scss
@@ -265,6 +265,8 @@
   min-width: 176px;
 }
 
+// Le groupe parent doit aussi passer devant la section des badges actifs.
+.nds-filter-panel > .nds-filter-group:has(.nds-filter-dropdown.is-open),
 .nds-filter-dropdown.is-open {
   z-index: 2;
 }