fix(quick filter): Selected option get lost if there not within maxgr…

…oupitems (APM-266050)

apps/components-e2e/src/components/quick-filter/quick-filter.e2e.ts

@@ -271,9 +271,9 @@ fixture('Quick Filter with show more')
 test('should check the show more with non distinct values', async (testController: TestController) => {
   await testController
     .expect(getShowMoreText('Country'))
-    .eql('There are 26 States available')
+    .eql('There are 25 States available')
     .expect(getGroupItems('Country').count)
-    .eql(4)
+    .eql(5)
     .click(getShowMoreButton('Country'))
     .expect(getGroupItems('Country').count)
     .eql(30)
@@ -289,9 +289,9 @@ test('should check the show more with non distinct values', async (testControlle
 test('should check the show more with distinct values', async (testController: TestController) => {
   await testController
     .expect(getShowMoreText('Value'))
-    .eql('There are 996 Options available')
+    .eql('There are 995 Options available')
     .expect(getGroupItems('Value').count)
-    .eql(5)
+    .eql(6)
     .click(getGroupItem('Value', 'Value 2'))
     .expect(getFilterfieldTags())
     .eql(['ValueValue 2'])

apps/dev/src/app.module.ts

@@ -99,6 +99,7 @@ import {
   DT_DEFAULT_DARK_THEMING_CONFIG,
 } from '@dynatrace/barista-components/core';
 import { ComboboxDemo } from './combobox/combobox-demo.component';
+import { QuickFilterDemoComponent } from './quick-filter/quick-filter-demo.component';
 
 // tslint:disable-next-line: use-component-selector
 @Component({ template: '' })
@@ -181,6 +182,7 @@ export class NoopRouteComponent {}
     SliderDemo,
     SidenavDemo,
     ContainerBreakpointObserverDemo,
+    QuickFilterDemoComponent,
   ],
   bootstrap: [DevApp],
   providers: [

apps/dev/src/devapp-routing.module.ts

@@ -80,6 +80,7 @@ import { ToggleButtonGroupDemo } from './toggle-button-group/toggle-button-group
 import { TopBarNavigationDemo } from './top-bar-navigation/top-bar-navigation-demo.component';
 import { TreeTableDemo } from './tree-table/tree-table-demo.component';
 import { ComboboxDemo } from './combobox/combobox-demo.component';
+import { QuickFilterDemoComponent } from './quick-filter/quick-filter-demo.component';
 
 const routes: Routes = [
   { path: 'alert', component: AlertDemo },
@@ -152,6 +153,7 @@ const routes: Routes = [
   { path: 'toggle-button-group', component: ToggleButtonGroupDemo },
   { path: 'sidenav', component: SidenavDemo },
   { path: 'tree-table', component: TreeTableDemo },
+  { path: 'quick-filter', component: QuickFilterDemoComponent },
 ];
 
 @NgModule({

apps/dev/src/devapp.component.ts

@@ -85,6 +85,7 @@ export class DevApp implements AfterContentInit, OnDestroy {
     { name: 'Pagination', route: '/pagination' },
     { name: 'Progress-bar', route: '/progress-bar' },
     { name: 'Progress-circle', route: '/progress-circle' },
+    { name: 'Quick-Filter', route: '/quick-filter' },
     { name: 'Radial-chart', route: '/radial-chart' },
     { name: 'Radio', route: '/radio' },
     { name: 'Secondary-nav', route: '/secondary-nav' },

apps/dev/src/dt-components.module.ts

@@ -77,6 +77,7 @@ import { DtToggleButtonGroupModule } from '@dynatrace/barista-components/toggle-
 import { DtTopBarNavigationModule } from '@dynatrace/barista-components/top-bar-navigation';
 import { DtTreeTableModule } from '@dynatrace/barista-components/tree-table';
 import { DtComboboxModule } from '@dynatrace/barista-components/experimental/combobox';
+import { DtQuickFilterModule } from '@dynatrace/barista-components/quick-filter';
 
 /**
  * NgModule that includes all Dynatrace angular components modules that are required to serve the examples.
@@ -144,6 +145,7 @@ import { DtComboboxModule } from '@dynatrace/barista-components/experimental/com
     DtStepperModule,
     DtSliderModule,
     DtContainerBreakpointObserverModule,
+    DtQuickFilterModule,
   ],
 })
 export class DevAppDynatraceModule {}

apps/dev/src/quick-filter/quick-filter-demo.component.html

@@ -0,0 +1,24 @@
+<dt-quick-filter
+  [dataSource]="_dataSource"
+  [maxGroupItems]="4"
+  [showMoreTemplate]="showMore"
+  aria-label="Filter By Input value"
+  label="Filter by"
+  clearAllLabel="Clear all"
+>
+  <dt-quick-filter-title>Quick-filter</dt-quick-filter-title>
+  <dt-quick-filter-sub-title>
+    All options in the filter field above
+  </dt-quick-filter-sub-title>
+  <div class="quick-demo-filter-content">my content</div>
+</dt-quick-filter>
+<ng-template #showMore let-count let-group="group">
+  <p class="dt-quick-filter-show-more-text">
+    There are {{ count }}
+    <ng-container [ngSwitch]="group">
+      <ng-container *ngSwitchCase="'Country'">States</ng-container>
+      <ng-container *ngSwitchDefault>Options</ng-container>
+    </ng-container>
+    available
+  </p>
+</ng-template>

apps/dev/src/quick-filter/quick-filter-demo.component.scss

@@ -0,0 +1,16 @@
+:host {
+  display: flex;
+  flex-flow: column;
+  align-items: flex-start;
+}
+
+dt-pagination {
+  align-self: center;
+  margin: 1em 0;
+}
+
+.quick-demo-filter-content {
+  padding: 16px;
+  width: 100%;
+  min-width: 320px;
+}

apps/dev/src/quick-filter/quick-filter-demo.component.ts

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
+import { DtQuickFilterDefaultDataSource } from '@dynatrace/barista-components/quick-filter';
+
+@Component({
+  selector: 'quick-filter-dev-app-demo',
+  templateUrl: './quick-filter-demo.component.html',
+  styleUrls: ['./quick-filter-demo.component.scss'],
+})
+export class QuickFilterDemoComponent
+  implements OnInit, OnDestroy, AfterViewInit {
+  show = true;
+  pageSize = 6;
+  searchValue = '';
+  _dataSource = new DtQuickFilterDefaultDataSource({
+    autocomplete: [
+      {
+        name: 'Value',
+        distinct: true,
+        autocomplete: Array.from(new Array(1000), (_, i) => ({
+          name: `Value ${i + 1}`,
+        })),
+      },
+      {
+        name: 'Country',
+        distinct: false,
+        autocomplete: Array.from(new Array(30), (_, i) => ({
+          name: `State ${i + 1}`,
+        })),
+      },
+    ],
+  });
+
+  ngAfterViewInit(): void {}
+  ngOnDestroy(): void {}
+  ngOnInit(): void {}
+}

libs/barista-components/quick-filter/src/quick-filter-group.ts

@@ -235,8 +235,12 @@ export class DtQuickFilterGroup<T = any> implements AfterViewInit {
       );
       if (!this.isDetail && items.length > this.maxGroupItems) {
         this._truncatedGroupItems = true;
-        this._showMoreCount = items.length - this.maxGroupItems;
-        return items.slice(0, this.maxGroupItems);
+        const filteredItems = items.filter(
+          (item, index) => index <= this.maxGroupItems || this._isActive(item),
+        );
+        this._showMoreCount =
+          items.length - Math.max(this.maxGroupItems, filteredItems.length);
+        return filteredItems;
       }
       return items;
     }