feat: (Core) add Search Field functionality to Combobox component (#4354

)

* add search field functionality to Combobox

* add tests

apps/docs/src/app/core/component-docs/combobox/combobox-docs.component.html

@@ -7,6 +7,15 @@
 
 <separator></separator>
 
+<fd-docs-section-title id="combobox-standard" componentName="combobox">Combobox as Search Field</fd-docs-section-title>
+<description>Set the <code>isSearch</code> property to true to use Combobox as a Search Field. The input-group addon is changed to 'search' and additional Clear button will appear when the user enters a value in the input field. The Clear button can be hidden by setting the <code>showClearButton</code> to false. By default it's set to true.</description>
+<component-example>
+    <fd-combobox-search-field-example></fd-combobox-search-field-example>
+</component-example>
+<code-example [exampleFiles]="comboboxSearchFieldExample"></code-example>
+
+<separator></separator>
+
 <fd-docs-section-title id="combobox-customFilter" componentName="combobox"> Custom Filter </fd-docs-section-title>
 <description>
     The input supports custom filters through the <code>filterFn</code> input function. Simply pass a function which

apps/docs/src/app/core/component-docs/combobox/combobox-docs.component.ts

@@ -30,6 +30,8 @@ import * as comboboxSeaHtml from '!raw-loader!./examples/combobox-search-functio
 import * as comboboxProgramHtml from '!raw-loader!./examples/combobox-open-control-example.component.html';
 import * as comboboxProgramTs from '!raw-loader!./examples/combobox-open-control-example.component.ts';
 import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file';
+import * as comboboxSearchFieldHTMLSrc from '!raw-loader!./examples/combobox-search-field-example.component.html';
+import * as comboboxSearchFieldTSSrc from '!raw-loader!./examples/combobox-search-field-example.component.ts';
 
 @Component({
     selector: 'fd-combobox-docs',
@@ -232,4 +234,18 @@ export class ComboboxDocsComponent {
             fileName: 'combobox-includes-example'
         }
     ];
+
+    comboboxSearchFieldExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: comboboxSearchFieldHTMLSrc,
+            fileName: 'combobox-search-field-example'
+        },
+        {
+            language: 'typescript',
+            component: 'ComboboxExampleComponent',
+            code: comboboxSearchFieldTSSrc,
+            fileName: 'combobox-search-field-example'
+        }
+    ];
 }

apps/docs/src/app/core/component-docs/combobox/examples/combobox-search-field-example.component.html

@@ -0,0 +1,11 @@
+<div fd-form-item>
+    <label fd-form-label>Search Field</label>
+    <fd-combobox
+        maxHeight="250px"
+        placeholder="Type some text..."
+        [isSearch]="true"
+        [dropdownValues]="fruits"
+        [(ngModel)]="searchTerm">
+    </fd-combobox>
+</div>
+<small>Search Term: {{ searchTerm }}</small>

apps/docs/src/app/core/component-docs/combobox/examples/combobox-search-field-example.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-combobox-search-field-example',
+    templateUrl: './combobox-search-field-example.component.html'
+})
+export class ComboboxSearchFieldExampleComponent {
+    searchTerm = '';
+    fruits = ['Apple', 'Pineapple', 'Banana', 'Kiwi', 'Strawberry', 'Blueberry', 'Orange', 'Lemon', 'Raspberry',  'Grapefruit', 'Apricot', 'Avocado', 'Cherry'];
+}

apps/docs/src/app/core/component-docs/combobox/examples/index.ts

@@ -12,6 +12,7 @@ import { ComboboxOpenControlExampleComponent } from './combobox-open-control-exa
 import { ComboboxSearchFunctionExampleComponent } from './combobox-search-function-example.component';
 import { ComboboxTemplateExampleComponent } from './combobox-template-example.component';
 import { ComboboxIncludesExampleComponent } from './combobox-includes-example.component';
+import { ComboboxSearchFieldExampleComponent } from './combobox-search-field-example.component'
 
 export * from './combobox-mobile/combobox-mobile-example.component';
 export * from './combobox-async-example.component';
@@ -26,6 +27,7 @@ export * from './combobox-height-example.component';
 export * from './combobox-open-control-example.component';
 export * from './combobox-search-function-example.component';
 export * from './combobox-template-example.component';
+export * from './combobox-search-field-example.component';
 
 export const examples = [
     ComboboxMobileExampleComponent,
@@ -41,5 +43,6 @@ export const examples = [
     ComboboxOpenControlExampleComponent,
     ComboboxSearchFunctionExampleComponent,
     ComboboxTemplateExampleComponent,
-    ComboboxIncludesExampleComponent
+    ComboboxIncludesExampleComponent,
+    ComboboxSearchFieldExampleComponent
 ];

libs/core/src/lib/combobox/combobox.component.html

@@ -3,6 +3,7 @@
 <ng-template #desktopTemplate>
     <fd-popover
         additionalBodyClass="fd-popover-custom-list"
+        [class.fd-combobox-full-width]="isSearch"
         [isOpen]="open && displayedValues && displayedValues.length"
         (isOpenChange)="isOpenChangeHandle($event)"
         [fillControlMode]="fillControlMode"
@@ -41,7 +42,7 @@
     <fd-input-group
         [compact]="compact"
         [button]="showDropdownButton"
-        [glyph]="showDropdownButton ? glyph : null"
+        [glyph]="showDropdownButton ? glyphValue : null"
         [state]="state"
         [buttonFocusable]="buttonFocusable"
         [disabled]="disabled || readOnly"
@@ -73,6 +74,21 @@
             (focus)="onTouched()"
             (blur)="handleBlur()"
         />
+        <span 
+            class="fd-input-group__addon fd-input-group__addon--button"
+            [class.fd-input-group__addon--compact]="compact"
+            *ngIf="isSearch && showClearButton && inputText && inputText.length > 0">
+            <button
+                fd-button
+                class="fd-input-group__button"
+                type="button"
+                fdType="transparent"
+                title="Clear input"
+                [class.fd-button--compact]="compact" 
+                (click)="_handleClearSearchTerm()">
+                <fd-icon glyph="decline"></fd-icon>
+            </button>
+        </span>
     </fd-input-group>
 </ng-template>
 

libs/core/src/lib/combobox/combobox.component.scss

@@ -13,3 +13,7 @@
 .fd-list__item.fd-combobox-list-item {
     cursor: pointer;
 }
+
+.fd-combobox-full-width {
+    width: 100%;
+}

libs/core/src/lib/combobox/combobox.component.spec.ts

@@ -222,4 +222,23 @@ describe('ComboboxComponent', () => {
         expect(component.onChange).toHaveBeenCalled();
         expect(component.inputText).toEqual('test');
     });
+
+    it('should change the addon to search when combobox is used as search field', () => {
+        component.isSearch = true;
+        expect(component.glyphValue).toBe('search');
+    });
+
+    it('should render two buttons when combobox is used as search field and there is input text', () => {
+        let addOns = fixture.nativeElement.querySelectorAll('button');
+        expect(addOns.length).toBe(1);
+        component.isSearch = true;
+        component.communicateByObject = true;
+        component.displayFn = (item: any): string => {
+            return item.displayedValue;
+        };
+        component.inputText = 'displayedValue2';
+        (<any>component)._cdRef.detectChanges();
+        addOns = fixture.nativeElement.querySelectorAll('button');
+        expect(addOns.length).toBe(2);
+    });
 });

libs/core/src/lib/combobox/combobox.component.ts

@@ -101,10 +101,22 @@ export class ComboboxComponent implements ComboboxInterface, ControlValueAccesso
     @Input()
     placeholder: string;
 
+    /**
+     * Whether the Combobox is a Search Field
+     */
+    @Input()
+    isSearch = false;
+
     /** Icon to display in the right-side button. */
     @Input()
     glyph = 'navigation-down-arrow';
 
+    /**
+     * Whether to show the clear search term button when the Combobox is a Search Field
+     */
+    @Input()
+    showClearButton = true;
+
     /**
      *  The trigger events that will open/close the options popover.
      *  Accepts any [HTML DOM Events](https://www.w3schools.com/jsref/dom_obj_event.asp).
@@ -412,6 +424,23 @@ export class ComboboxComponent implements ComboboxInterface, ControlValueAccesso
         this.onTouched();
     }
 
+    /** Get the glyph value based on whether the combobox is used as a search field or not. */
+    get glyphValue(): string {
+        return this.isSearch ? 'search' : 'navigation-down-arrow';
+    }
+
+    /** @hidden */
+    _handleClearSearchTerm(): void {
+        this.inputTextValue = '';
+        this.inputTextChange.emit('');
+        this.displayedValues = this.dropdownValues;
+        if (!this.mobile) {
+            this._propagateChange();
+        }
+        this.onTouched();
+        this._cdRef.detectChanges();
+    }
+
     /** @hidden */
     writeValue(value: any): void {
         this.inputTextValue = this.displayFn(value);

libs/core/src/lib/combobox/combobox.module.ts

@@ -9,6 +9,7 @@ import { ComboboxComponent } from './combobox.component';
 import { ButtonModule } from '../button/button.module';
 import { InputGroupModule } from '../input-group/input-group.module';
 import { ListModule } from '../list/list.module';
+import { IconModule } from '../icon/icon.module';
 import { AutoCompleteDirective } from './auto-complete.directive';
 
 @NgModule({
@@ -21,7 +22,8 @@ import { AutoCompleteDirective } from './auto-complete.directive';
         PipeModule,
         ButtonModule,
         InputGroupModule,
-        ListModule
+        ListModule,
+        IconModule
     ],
     exports: [ComboboxComponent]
 })