fix: combobox primary button click (#1165)

* combobox primary button click * Add example
SAP · Aug 23, 2019 · 0ad23e9 · 0ad23e9
1 parent 13b069c
commit 0ad23e9
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 4 deletions.
diff --git a/docs/app/documentation/component-docs/combobox/combobox-docs.component.html b/docs/app/documentation/component-docs/combobox/combobox-docs.component.html
@@ -16,13 +16,24 @@ <h2>Custom Filter</h2>
 </component-example>
 <code-example [exampleFiles]="comboboxDynamicExample"></code-example>
 
+<separator></separator>
+<h2>Custom Search Function</h2>
+<description>
+    Custom search function can be provided by <code>[searchFunction]</code> to combobox. It will be called on mouse
+    click on combobox's primary button, or on enter key press, while focused on combobox input.
+</description>
+<component-example [name]="'ex3'">
+    <fd-combobox-search-function-example></fd-combobox-search-function-example>
+</component-example>
+<code-example [exampleFiles]="comboboxSearchFunctionExample"></code-example>
+
 <separator></separator>
 <h2>Display Object Property</h2>
 <description>
     Passing object arrays to the Combobox is supported through the <code>displayFn</code> input function. To
     access the <code>this</code> keyword inside the passed function, use an arrow function.
 </description>
-<component-example [name]="'ex3'">
+<component-example [name]="'ex4'">
     <fd-combobox-displaywith-example></fd-combobox-displaywith-example>
 </component-example>
 <code-example [exampleFiles]="comboboxDisplayExample"></code-example>
@@ -36,7 +47,7 @@ <h2>Observable Async Example</h2>
 <description>
     This example also demonstrates how to create a callback function from data returned by the observable.
 </description>
-<component-example [name]="'ex4'">
+<component-example [name]="'ex5'">
     <fd-combobox-async-example></fd-combobox-async-example>
 </component-example>
 <code-example [exampleFiles]="comboboxAsyncExample"></code-example>
@@ -47,7 +58,7 @@ <h2>Custom Item Template</h2>
     The way the items are rendered in the popover list can be customized through providing an <code>itemTemplate</code>
     to the component.
 </description>
-<component-example [name]="'ex5'">
+<component-example [name]="'ex6'">
     <fd-combobox-template-example></fd-combobox-template-example>
 </component-example>
 <code-example [exampleFiles]="comboboxTemplateExample"></code-example>
diff --git a/docs/app/documentation/component-docs/combobox/combobox-docs.component.ts b/docs/app/documentation/component-docs/combobox/combobox-docs.component.ts
@@ -10,6 +10,8 @@ import * as comboboxDisplayHtml from '!raw-loader!./examples/combobox-displaywit
 import * as comboboxDisplayTs from '!raw-loader!./examples/combobox-displaywith-example.component.ts';
 import * as comboboxTemplateH from '!raw-loader!./examples/combobox-template-example.component.html';
 import * as comboboxTemplateT from '!raw-loader!./examples/combobox-template-example.component.ts';
+import * as comboboxSeaTs from '!raw-loader!./examples/combobox-search-function-example.component.ts';
+import * as comboboxSeaHtml from '!raw-loader!./examples/combobox-search-function-example.component.html';
 import { ExampleFile } from '../../core-helpers/code-example/example-file';
 
 @Component({
@@ -40,6 +42,17 @@ export class ComboboxDocsComponent {
         }
     ];
 
+    comboboxSearchFunctionExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: comboboxSeaHtml
+        },
+        {
+            language: 'typescript',
+            code: comboboxSeaTs
+        }
+    ];
+
     comboboxAsyncExample: ExampleFile[] = [
         {
             language: 'html',

diff --git a/...entation/component-docs/combobox/examples/combobox-search-function-example.component.html b/...entation/component-docs/combobox/examples/combobox-search-function-example.component.html
@@ -0,0 +1,7 @@
+<fd-combobox [(ngModel)]="searchTerm"
+             [dropdownValues]="dropdownValues"
+             [searchFunction]="customSearchFunction"
+             [placeholder]="'Type to filter the list...'">
+</fd-combobox>
+<br/>
+<span>Search Term: {{searchTerm}}</span>
diff --git a/...umentation/component-docs/combobox/examples/combobox-search-function-example.component.ts b/...umentation/component-docs/combobox/examples/combobox-search-function-example.component.ts
@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-combobox-search-function-example',
+    templateUrl: 'combobox-search-function-example.component.html'
+})
+export class ComboboxSearchFunctionExampleComponent {
+
+    searchTerm: string = '';
+
+    dropdownValues = [
+        'Apple',
+        'Pineapple',
+        'Banana',
+        'Kiwi',
+        'Strawberry'
+    ];
+
+    customSearchFunction: Function = () => {
+        alert('Custom Function Called');
+    };
+
+
+}
diff --git a/docs/app/documentation/documentation.module.ts b/docs/app/documentation/documentation.module.ts
@@ -399,6 +399,7 @@ import { RadioFormGroupExampleComponent } from './component-docs/radio/examples/
 import { RadioExamplesComponent } from './component-docs/radio/examples/radio-examples.component';
 import { RadioDocsComponent } from './component-docs/radio/radio-docs.component';
 import { RadioHeaderComponent } from './component-docs/radio/radio-header/radio-header.component';
+import { ComboboxSearchFunctionExampleComponent } from './component-docs/combobox/examples/combobox-search-function-example.component';
 
 @NgModule({
     declarations: [
@@ -637,6 +638,7 @@ import { RadioHeaderComponent } from './component-docs/radio/radio-header/radio-
         ComboboxAsyncExampleComponent,
         ComboboxDisplaywithExampleComponent,
         ComboboxDynamicExampleComponent,
+        ComboboxSearchFunctionExampleComponent,
         ComboboxExampleComponent,
         ComboboxTemplateExampleComponent,
         LoadingSpinnerDocsComponent,

diff --git a/library/src/lib/combobox/combobox.component.html b/library/src/lib/combobox/combobox.component.html
@@ -19,7 +19,8 @@
                             type="button"
                             [fdType]="'light'"
                             [glyph]="glyph"
-                            [disabled]="disabled">
+                            [disabled]="disabled"
+                            (click)="onPrimaryButtonClick()">
                     </button>
                 </span>
             </div>

diff --git a/library/src/lib/combobox/combobox.component.ts b/library/src/lib/combobox/combobox.component.ts
@@ -234,6 +234,13 @@ export class ComboboxComponent implements ControlValueAccessor, OnInit, OnChange
         this.displayedValues = this.filterFn(this.dropdownValues, this.inputText);
     }
 
+    /** @hidden */
+    onPrimaryButtonClick(): void {
+        if (this.searchFunction) {
+            this.searchFunction();
+        }
+    }
+
     private defaultDisplay(str: any): string {
         return str;
     }