API Dropdown - navigation fix (#2460)

Author: JMach1

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

@@ -49,7 +49,7 @@
                 <div class="menu menu-vertical" role="list">
                     <!-- ko foreach: { data: group.items, as: 'item' } -->
                     <a href="#" role="listitem" class="nav-link text-truncate" data-dismiss
-                        data-bind="attr: { href: $component.getReferenceUrl(item) }, css: { 'nav-link-active': $component.selectedApiName() === item.name }, activate: $component.closeDropdown">
+                        data-bind="attr: { href: $component.getReferenceUrl(item) }, css: { 'nav-link-active': $component.selectedApiName() === item.name }, click: $component.closeDropdown">
                         <span data-bind="text: item.displayName"></span>
                         <!-- ko if: item.type === 'soap' -->
                         <span class="badge badge-soap">SOAP</span>
@@ -79,7 +79,7 @@
             <!-- ko foreach: { data: apis, as: 'item' } -->
             <div class="menu menu-vertical" role="list">
                 <a href="#" role="listitem" class="nav-link text-truncate" data-dismiss
-                    data-bind="attr: { href: $component.getReferenceUrl(item) }, css: { 'nav-link-active': $component.selectedApiName() === item.name }, activate: $component.closeDropdown">
+                    data-bind="attr: { href: $component.getReferenceUrl(item) }, css: { 'nav-link-active': $component.selectedApiName() === item.name }, click: $component.closeDropdown">
                     <span data-bind="text: item.displayName"></span>
                     <!-- ko if: item.type === 'soap' -->
                     <span class="badge badge-soap">SOAP</span>

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

@@ -184,12 +184,14 @@ export class ApiListDropdown {
         this.groupTagsExpanded(newSet);
     }
 
-    public closeDropdown(): void {
+    public closeDropdown(): true {
         const apiDropdowns = document.getElementsByClassName("api-list-dropdown");
         for (let i = 0; i < apiDropdowns.length; i++) {
             if (apiDropdowns[i].classList.contains("show"))
                 apiDropdowns[i].classList.remove("show");
         }
+
+        return true; // return true to not-prevent the default action https://knockoutjs.com/documentation/click-binding.html#note-3-allowing-the-default-click-action
     }
 
     @OnDestroyed()