From 0ad23e96b6c0b25f00947258e77a480124fadc60 Mon Sep 17 00:00:00 2001
From: jmarkowski <jmarkowski@divante.co>
Date: Fri, 23 Aug 2019 18:09:17 +0300
Subject: [PATCH] fix: combobox primary button click (#1165)

* combobox primary button click

* Add example
---
 .../combobox/combobox-docs.component.html     | 17 ++++++++++---
 .../combobox/combobox-docs.component.ts       | 13 ++++++++++
 ...box-search-function-example.component.html |  7 ++++++
 ...bobox-search-function-example.component.ts | 24 +++++++++++++++++++
 .../app/documentation/documentation.module.ts |  2 ++
 .../src/lib/combobox/combobox.component.html  |  3 ++-
 .../src/lib/combobox/combobox.component.ts    |  7 ++++++
 7 files changed, 69 insertions(+), 4 deletions(-)
 create mode 100644 docs/app/documentation/component-docs/combobox/examples/combobox-search-function-example.component.html
 create mode 100644 docs/app/documentation/component-docs/combobox/examples/combobox-search-function-example.component.ts

diff --git a/docs/app/documentation/component-docs/combobox/combobox-docs.component.html b/docs/app/documentation/component-docs/combobox/combobox-docs.component.html
index b37ac74f4bd..705fc8c2e69 100644
--- 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
index b0e892a7088..f50b27ce2a7 100644
--- 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/docs/app/documentation/component-docs/combobox/examples/combobox-search-function-example.component.html b/docs/app/documentation/component-docs/combobox/examples/combobox-search-function-example.component.html
new file mode 100644
index 00000000000..63a40c18879
--- /dev/null
+++ b/docs/app/documentation/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/docs/app/documentation/component-docs/combobox/examples/combobox-search-function-example.component.ts b/docs/app/documentation/component-docs/combobox/examples/combobox-search-function-example.component.ts
new file mode 100644
index 00000000000..fd2dbebf833
--- /dev/null
+++ b/docs/app/documentation/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
index b5e8efb2352..20412951939 100644
--- 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
index ffe9d242584..e6ed829c2f6 100644
--- 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
index 41df08ac968..12d278b869d 100644
--- 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;
     }