# 4.5 Dropdown-Container

## 4.5 Dropdown-Container

Für die Darstellung aller Optionen (zu gegebener Zeit) stehen verschiedene Varianten zur Auswahl. Eine Möglichkeit ist, den Container als HTML-Dialog zu gestalten. Die vorhandenen Funktionen sind jedoch nicht für diese Komponente geeignet. Für den gewünschten Zweck erfordert das Dialog-Element noch einiges an benutzerdefinierter Anpassung.

Eine weitere Variante ist, ein normales `div` als Options-Container zu verwenden. Dies erfordert ebenfalls einen enormen Implementationsaufwand. Eine Anwendung dieses Ansatzes findet sich in der ersten Version der Komponente. Hierbei eröffnet sich das Problem der Inkonsistenz zwischen UI und Controller. Zudem ist es möglich, dass unerwünscht mehrere Dropdown-Container gleichzeitig offen sind.

Als dritte Möglichkeit bietet sich die Popover-API an. Seit 2024 unterstützen alle gängigen Browser diese Schnittstelle. Durch das Refactoring der Variante mit dem normalen Div-Container resultiert eine Version mit der Anwendung dieser API. Im Gegensatz zu den beiden oben erwähnten Container-Implementationen reduziert sich durch diese Schnittstelle der Zusatzaufwand. Der Grundaufbau des Popover-Containers ist im folgenden Code 4.8 dargestellt.

{% code title="Code 4.8: Beispiel – Popover-Container" lineNumbers="true" %}
```html
<div popover="auto"
     id="select-component-0-options" 
     class="options-component" 
> <!-- content --> </div>
```
{% endcode %}

Bei diesem Codeausschnitt (4.8) ist wichtig, dass das Attribut `popover` den Wert `auto` erhält. Dies bewirkt, dass sich die Popover automatisch schliessen, wenn ein Klick ausserhalb des Containers passiert. Das Öffnen und Schliessen des Dropdown-Elements lässt sich über das `popovertarget`-Attribut auf der Bedienkomponente steuern. Dieses Target enthält die `id` des Div-Containers mit dem Attribut `popover`. Als Alternative dazu besteht die Möglichkeit, das Popover über JavaScript zu steuern. Hierbei besteht die Möglichkeit, auf den Status und das Event des Togglens zuzugreifen. Diese Funktionalitäten erlauben dem Controller, sich konsistent zum UI zu halten.

Obwohl nur die Unterstützung der aktuellen Browser verlangt ist, soll die Komponente ältere Browser-Versionen nicht komplett ignorieren. Erst seit April 2024 unterstützen alle Browser die Popover-API. Ein Test auf einem veralteten Firefox zeigt, dass die Komponente wegen der Popover-Funktionalität einen Fehler in die Console wirft. Dadurch visualisiert der Browser die Komponente nicht. Der folgende Code 4.9 fängt die Fehlermeldung ab.

{% code title="Code 4.9: Workaround für ältere Browser" lineNumbers="true" %}
```javascript
try {
    /* code block with 
        `popoverContainer.showPopover();`
    or  `popoverContainer.hidePopover();`
    */
} catch (e) {
    /* inform user about unsupported popover 
       the first time an alert popup appears */
}
```
{% endcode %}

Ein Alert-Popup informiert den Nutzer über Einschränkungen(Abbildung B.19 im Anhang [**B**](../anhang/b.-neue-komponente-bilder)). Einige zusätzliche CSS-Definitionen garantieren eine halbwegs ansehnliche Darstellung. Veraltete Browser, welche das nested CSS _<mark style="color:purple;">\[5]</mark>_ und das CSS-`:has()` nicht unterstützen, zeigen die neue Komponenten inkonsistent an.



_<mark style="color:purple;">\[5]</mark>_ Verschachtelter CSS-Code mit Verwendung der `&`-Funktionalität&#x20;

