Fixed behavior of collapsible components.

src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.html

@@ -1,6 +1,5 @@
-<div class="dropdown-container">
-    <div class="form-control" tabindex="0" role="button" aria-label="APIs"
-        data-bind="activate: toggle, css: { expanded: expanded }, attr: { 'aria-expanded': expanded().toString() }">
+<div class="dropdown-container collapsible">
+    <div class="form-control" tabindex="0" role="button" aria-label="APIs" data-toggle="collapsible">
         <div class="input-group">
             <div class="input">
                 <span data-bind="text: selection"></span>
@@ -14,7 +13,7 @@
         </div>
     </div>
 
-    <div class="collapsible-dropdown" data-bind="visible: expanded">
+    <div class="collapsible-dropdown collapsible-content">
         <div class="search-input">
             <input type="search" role="searchbox" aria-label="Search" placeholder="Search APIs"
                 data-bind="textInput: pattern" autofocus />

src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.ts

@@ -25,7 +25,6 @@ export class ApiListDropdown {
     public readonly hasPager: ko.Computed<boolean>;
     public readonly hasPrevPage: ko.Observable<boolean>;
     public readonly hasNextPage: ko.Observable<boolean>;
-    public readonly expanded: ko.Observable<boolean>;
     public readonly selection: ko.Computed<string>;
 
     constructor(
@@ -44,7 +43,6 @@ export class ApiListDropdown {
         this.hasNextPage = ko.observable();
         this.hasPager = ko.computed(() => this.hasPrevPage() || this.hasNextPage());
         this.apiGroups = ko.observableArray();
-        this.expanded = ko.observable(false);
         this.selection = ko.computed(() => {
             const api = ko.unwrap(this.selectedApi);
             return api ? api.versionedDisplayName : "Select API";
@@ -140,10 +138,6 @@ export class ApiListDropdown {
         this.loadPageOfApis();
     }
 
-    public toggle(): void {
-        this.expanded(!this.expanded());
-    }
-
     public getReferenceUrl(api: Api): string {
         return this.routeHelper.getApiReferenceUrl(api.name, this.detailsPageUrl());
     }

src/themes/website/scripts/collapsibles.ts

@@ -1,25 +1,70 @@
-const mousedown = (event: MouseEvent): void => {
+import { Keys } from "@paperbits/common";
+
+const collapsibleSelector = ".collapsible";
+const collapsibleToggleSelector = "[data-toggle]";
+const collapsibleExpandedClass = "expanded";
+const collapsibleExpandedAriaAttr = "exaria-expanded";
+
+const selfAndParents = (element: HTMLElement) => {
+    const elements = [element];
+
+    while (element.parentElement && element.parentElement.tagName !== "BODY") {
+        elements.push(element.parentElement);
+        element = element.parentElement;
+    }
+
+    return elements;
+};
+
+const onClick = (event: MouseEvent) => {
     if (event.which !== 1) {
         return;
     }
+    onActivate();
+};
 
-    const target = <HTMLElement>event.target;
-
-    if (!target.closest) {
+const onKeyDown = (event: KeyboardEvent) => {
+    if (event.keyCode !== Keys.Enter && event.keyCode !== Keys.Space) {
         return;
     }
+    onActivate();
+};
 
-    const toggleElement = target.closest("[data-toggle]");
+const onActivate = (): void => {
+    const target = <HTMLElement>event.target;
+    const collapsibles: HTMLElement[] = Array.prototype.slice.call(document.querySelectorAll(collapsibleSelector));
 
-    if (!toggleElement) {
-        return;
+    let toggleElement: HTMLElement;
+
+    if (target.closest) {
+        toggleElement = target.closest(collapsibleToggleSelector);
     }
 
-    const collapsible: HTMLElement = toggleElement.closest(".collapsible");
+    const exclude = selfAndParents(target);
+
+    if (toggleElement) {
+        const collapsible: HTMLElement = toggleElement.closest(collapsibleSelector);
 
-    if (collapsible) {
-        collapsible.classList.toggle("expanded");
+        if (collapsible) {
+            collapsible.classList.toggle(collapsibleExpandedClass);
+        }
+
+        const expanded = collapsible.classList.contains(collapsibleExpandedClass);
+        toggleElement.setAttribute(collapsibleExpandedAriaAttr, expanded.toString());
     }
+
+    collapsibles.forEach(x => {
+        if (!exclude.includes(x)) {
+            x.classList.remove(collapsibleExpandedClass);
+
+            const toggleElement = x.querySelector(collapsibleToggleSelector);
+
+            if (toggleElement) {
+                toggleElement.setAttribute(collapsibleExpandedAriaAttr, "false");
+            }
+        }
+    });
 };
 
-document.addEventListener("mousedown", mousedown, true);
+document.addEventListener("click", onClick, true);
+document.addEventListener("keydown", onKeyDown, true);

src/themes/website/styles/widgets/collapsibles.scss

@@ -41,6 +41,18 @@
     animation: fadeIn 0.2s linear forwards;
 }
 
+.collapsible-dropdown {
+    position: absolute;
+    background: #fff;
+    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
+    z-index: 9000;
+    padding: 20px;
+    width: 100%;
+    top: 100%;
+    left: 0;
+    right: 0;
+}
+
 @media (min-width: $breakpoint-md) {
     .collapsible-panel {
         & > .collapsible-content {
@@ -55,7 +67,8 @@
 
 .collapsible.expanded {
     & > .collapsible-content {
-        display: flex;
+        // display: flex;
+        display: block;
         position: absolute;
     }
 }