fix(core): multi input more button dropdown values (#10787)

SAP · Oct 25, 2023 · 738914d · 738914d
1 parent d6c31d4
commit 738914d
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/libs/core/src/lib/multi-input/multi-input.component.html b/libs/core/src/lib/multi-input/multi-input.component.html
@@ -134,7 +134,11 @@
             </li>
 
             <li
-                *ngIf="showAllButton && viewModel.displayedOptions.length < dropdownValues.length"
+                *ngIf="
+                    showAllButton &&
+                    (_onlySelected$ | async) !== true &&
+                    viewModel.displayedOptions.length < dropdownValues.length
+                "
                 fd-list-item
                 class="fd-multi-input-show-all"
                 (keyDown)="_showAllKeyDown($event)"

diff --git a/libs/core/src/lib/multi-input/multi-input.component.ts b/libs/core/src/lib/multi-input/multi-input.component.ts
@@ -414,6 +414,9 @@ export class MultiInputComponent<ItemType = any, ValueType = any>
     /** @hidden */
     readonly optionItems$ = new BehaviorSubject<_OptionItem<ItemType, ValueType>[]>([]);
 
+    /** @hidden */
+    readonly _onlySelected$ = new BehaviorSubject<boolean>(false);
+
     /** @hidden */
     readonly _searchTermCtrl = new FormControl('');
 
@@ -603,6 +606,7 @@ export class MultiInputComponent<ItemType = any, ValueType = any>
         if (!this.open) {
             this._resetSearchTerm();
             this.enableParentFocusTrap();
+            this._onlySelected$.next(false);
         } else {
             this.disableParentFocusTrap();
 
@@ -780,6 +784,7 @@ export class MultiInputComponent<ItemType = any, ValueType = any>
 
     /** @hidden */
     _moreClicked(): void {
+        this._onlySelected$.next(true);
         this.openChangeHandle(true);
     }
 
@@ -962,16 +967,24 @@ export class MultiInputComponent<ItemType = any, ValueType = any>
         return combineLatest([
             this._searchTermCtrl.valueChanges.pipe(startWith(this._searchTermCtrl.value)),
             this._selectionModel.selectionChanged.pipe(startWith(null)),
+            this._onlySelected$,
             this.optionItems$
         ]).pipe(
             map(() => {
                 // not using "searchTerm" value from combineLatest as it will be wrong for late subscribers, if any
                 const searchTerm = this._searchTermCtrl.value ?? '';
                 const filtered = this.filterFn(this.dropdownValues, searchTerm);
-                const displayedOptions = (Array.isArray(filtered) ? filtered : []).map((item) =>
+                const onlySelected = this._onlySelected$.value;
+                let displayedOptions = (Array.isArray(filtered) ? filtered : []).map((item) =>
                     this._getOptionItem(item)
                 );
+
                 displayedOptions.forEach((c) => (c.isSelected = this._selectionModel.isSelected(c.id)));
+
+                if (onlySelected) {
+                    displayedOptions = displayedOptions.filter((item) => item.isSelected);
+                }
+
                 return { selectedOptions: this._selectionModel.selected, displayedOptions };
             })
         );

diff --git a/libs/docs/shared/src/lib/core-helpers/sections-toolbar/sections-toolbar.component.html b/libs/docs/shared/src/lib/core-helpers/sections-toolbar/sections-toolbar.component.html
@@ -15,7 +15,7 @@
     </div>
     <div class="fd-docs-sidebar-content">
         <fd-side-nav>
-            <div fd-side-nav-main>
+            <div fd-side-nav-main fd-scrollbar>
                 <ul fd-nested-list [textOnly]="true">
                     <li
                         fd-nested-list-item

diff --git a/libs/docs/shared/src/lib/core-helpers/sections-toolbar/sections-toolbar.component.ts b/libs/docs/shared/src/lib/core-helpers/sections-toolbar/sections-toolbar.component.ts
@@ -16,6 +16,7 @@ import { FormsModule } from '@angular/forms';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { InputGroupModule } from '@fundamental-ngx/core/input-group';
 import { NestedListModule } from '@fundamental-ngx/core/nested-list';
+import { ScrollbarDirective } from '@fundamental-ngx/core/scrollbar';
 import { SideNavigationModule } from '@fundamental-ngx/core/side-navigation';
 import { SortByPipe } from '../pipes/sort.pipe';
 import {
@@ -42,7 +43,8 @@ const SMALL_SCREEN_BREAKPOINT = 992;
         NgTemplateOutlet,
         RouterLinkActive,
         RouterLink,
-        SortByPipe
+        SortByPipe,
+        ScrollbarDirective
     ]
 })
 export class SectionsToolbarComponent implements OnInit, OnChanges {