From 341910b20bc607daa809a00d5b4a68bc1b282ae7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 27 May 2026 10:41:03 +0200
Subject: [PATCH] Keep multiselect option pulldowns active in off state

---
 patterns/multiselektions-pulldown.html | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/patterns/multiselektions-pulldown.html b/patterns/multiselektions-pulldown.html
index 77e18e3..5a8f0dd 100644
--- a/patterns/multiselektions-pulldown.html
+++ b/patterns/multiselektions-pulldown.html
@@ -216,7 +216,7 @@
                       </span>
                     </label>
 
-                    <div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
+                    <div class="sg-pulldown-panel__row" data-pulldown-filter-row data-active="true" data-component-part="pulldown-filter-row">
                       <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 1: aus">
                         <span class="sg-mode-toggle__switch" aria-hidden="true">
                           <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
@@ -226,7 +226,7 @@
                       </button>
                       <p class="sg-pulldown-panel__label sg-body">Pulldown 1</p>
 
-                      <select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 1 Auswahl" disabled>
+                      <select class="sg-interaction-element sg-pulldown sg-pulldown--selected" aria-label="Pulldown 1 Auswahl">
                         <option selected>Option 1</option>
                         <option>Option 2</option>
                         <option>Option 3</option>
@@ -237,7 +237,7 @@
                   <section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-4">
                     <h2 id="multiselect-block-4" class="sg-strong sg-form-sections-card__chapter-title">Block 4</h2>
 
-                    <div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
+                    <div class="sg-pulldown-panel__row" data-pulldown-filter-row data-active="true" data-component-part="pulldown-filter-row">
                       <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 2: aus">
                         <span class="sg-mode-toggle__switch" aria-hidden="true">
                           <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
@@ -247,14 +247,14 @@
                       </button>
                       <p class="sg-pulldown-panel__label sg-body">Pulldown 2</p>
 
-                      <select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 2 Auswahl" disabled>
+                      <select class="sg-interaction-element sg-pulldown sg-pulldown--selected" aria-label="Pulldown 2 Auswahl">
                         <option selected>Option 1</option>
                         <option>Option 2</option>
                         <option>Option 3</option>
                       </select>
                     </div>
 
-                    <div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
+                    <div class="sg-pulldown-panel__row" data-pulldown-filter-row data-active="true" data-component-part="pulldown-filter-row">
                       <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 3: aus">
                         <span class="sg-mode-toggle__switch" aria-hidden="true">
                           <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
@@ -264,14 +264,14 @@
                       </button>
                       <p class="sg-pulldown-panel__label sg-body">Pulldown 3</p>
 
-                      <select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 3 Auswahl" disabled>
+                      <select class="sg-interaction-element sg-pulldown sg-pulldown--selected" aria-label="Pulldown 3 Auswahl">
                         <option selected>Option 1</option>
                         <option>Option 2</option>
                         <option>Option 3</option>
                       </select>
                     </div>
 
-                    <div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
+                    <div class="sg-pulldown-panel__row" data-pulldown-filter-row data-active="true" data-component-part="pulldown-filter-row">
                       <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 4: aus">
                         <span class="sg-mode-toggle__switch" aria-hidden="true">
                           <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
@@ -281,7 +281,7 @@
                       </button>
                       <p class="sg-pulldown-panel__label sg-body">Pulldown 4</p>
 
-                      <select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 4 Auswahl" disabled>
+                      <select class="sg-interaction-element sg-pulldown sg-pulldown--selected" aria-label="Pulldown 4 Auswahl">
                         <option selected>Option 1</option>
                         <option>Option 2</option>
                         <option>Option 3</option>
@@ -337,11 +337,11 @@
           if (!select) {
             return;
           }
-          pulldownRow.dataset.active = isActive ? 'true' : 'false';
-          select.disabled = !isActive;
-          pulldownRow.classList.toggle('sg-pulldown-panel__row--disabled', !isActive);
-          select.classList.toggle('sg-pulldown--selected', isActive);
-          select.classList.toggle('sg-pulldown--inactive-selectable', !isActive);
+          pulldownRow.dataset.active = 'true';
+          select.disabled = false;
+          pulldownRow.classList.remove('sg-pulldown-panel__row--disabled');
+          select.classList.add('sg-pulldown--selected');
+          select.classList.remove('sg-pulldown--inactive-selectable');
         }
       };