### File

`src/combobox/combobox.component.ts`

### Description

ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own. Multi-select comboboxes also provide "pills" of selected items.

See demo

../../iframe.html?id=combobox--basic

### Implements

`OnChanges` `AfterViewInit` `AfterContentInit`

### Metadata

providers | `{ provide: NG_VALUE_ACCESSOR, useExisting: ComboBox, multi: true }`
selector | `ibm-combo-box`
template |
    <label *ngIf="label" [for]="id" class="bx--label">
    	<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
    	<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
    </label>
    <div *ngIf="helperText" class="bx--form__helper-text">
    	<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
    	<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
    </div>
    <div
    	[ngClass]="{
    		'bx--multi-select': type === 'multi',
    		'bx--combo-box': type === 'single' || !pills.length
    	}"
    	class="bx--combo-box bx--list-box"
    	role="listbox"
    	[attr.data-invalid]="(invalid ? true : null)">
    	<div
    		[attr.aria-expanded]="open"
    		role="button"
    		class="bx--list-box__field"
    		type="button"
    		tabindex="-1"
    		aria-label="close menu"
    		aria-haspopup="true"
    		(click)="toggleDropdown()">
    		<div
    			*ngIf="type === 'multi' && pills.length > 0"
    			(click)="clearSelected()"
    			role="button"
    			class="bx--list-box__selection bx--list-box__selection--multi"
    			title="Clear all selected items">
    			{{ pills.length }}
    			<svg
    				focusable="false"
    				preserveAspectRatio="xMidYMid meet"
    				style="will-change: transform;"
    				role="img"
    				xmlns="http://www.w3.org/2000/svg"
    				width="16"
    				height="16"
    				viewBox="0 0 16 16"
    				aria-hidden="true">
    				<path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path>
    			</svg>
    		</div>
    		<input
    			#input
    			[id]="id"
    			[disabled]="disabled"
    			(keyup)="onSearch($event.target.value)"
    			(keydown.enter)="onSubmit($event)"
    			[value]="selectedValue"
    			class="bx--text-input"
    			role="searchbox"
    			tabindex="0"
    			[attr.aria-label]="label"
    			aria-haspopup="true"
    			autocomplete="off"
    			[placeholder]="placeholder"/>
    		<ibm-icon-warning-filled16 *ngIf="invalid" class="bx--list-box__invalid-icon"></ibm-icon-warning-filled16>
    		<div
    			*ngIf="showClearButton"
    			role="button"
    			class="bx--list-box__selection"
    			tabindex="0"
    			aria-label="Clear Selection"
    			title="Clear selected item"
    			(click)="clearInput($event)">
    			<ibm-icon-close16></ibm-icon-close16>
    		</div>
    		<ibm-icon-chevron-down16
    			[ngClass]="{'bx--list-box__menu-icon--open': open}"
    			class="bx--list-box__menu-icon"
    			ariaLabel="Close menu">
    		</ibm-icon-chevron-down16>
    	</div>
    	<div
    		#dropdownMenu
    		*ngIf="open">
    		<ng-content></ng-content>
    	</div>
    </div>
    <div *ngIf="invalid">
    	<div *ngIf="!isTemplate(invalidText)" class="bx--form-requirement">{{ invalidText }}</div>
    	<ng-template
    		*ngIf="isTemplate(invalidText)"
    		[ngTemplateOutlet]="invalidText">
    	</ng-template>
    </div>

### Index

###### Properties
Static comboBoxCount dropdownMenu input Protected noop Protected onTouchedCallback Public open Public pills Protected propagateChangeCallback Public selectedValue Public showClearButton view
###### Methods
_noop clearInput Public clearSelected Public closeDropdown Public isTemplate ngAfterContentInit ngAfterViewInit ngOnChanges onBlur Public onSearch Public onSubmit Public openDropdown registerOnChange registerOnTouched Public toggleDropdown Public updatePills Protected updateSelected writeValue
###### Inputs
disabled helperText id invalid invalidText items label placeholder size type
###### Outputs
close search selected submit
###### HostBindings
attr.role class.bx--list-box__wrapper style.display
###### HostListeners
keydown

### Constructor

`constructor(elementRef: ElementRef)`
Defined in src/combobox/combobox.component.ts:253
Creates an instance of ComboBox. Parameters :
Name | Type | Optional
elementRef | `ElementRef` | No

### Inputs

`disabled` | Set to `true` to disable combobox. Default value : `false`
Defined in src/combobox/combobox.component.ts:191

`helperText` | Sets the optional helper text. Type : `string | TemplateRef<any>`
Defined in src/combobox/combobox.component.ts:179

`id` | Default value : ``dropdown-${ComboBox.comboBoxCount++}``
Defined in src/combobox/combobox.component.ts:132

`invalid` | Set to `true` for invalid state. Default value : `false`
Defined in src/combobox/combobox.component.ts:183

`invalidText` | Value displayed if dropdown is in invalid state. Type : `string | TemplateRef<any>`
Defined in src/combobox/combobox.component.ts:187

`items` | List of items to fill the content with. Example:
         * items = [
         *        {
         *            content: "Abacus",
         *            selected: false
         *        },
         *        {
         *            content: "Byte",
         *            selected: false,
         *        },
         *        {
         *            content: "Computer",
         *            selected: false
         *        },
         *        {
         *            content: "Digital",
         *            selected: false
         *        }
         * ];
         *
Type : `Array<ListItem>` Default value : `[]`
Defined in src/combobox/combobox.component.ts:159

`label` | Label for the combobox. Type : `string | TemplateRef<any>`
Defined in src/combobox/combobox.component.ts:175

`placeholder` | Text to show when nothing is selected. Default value : `"Filter..."`
Defined in src/combobox/combobox.component.ts:163

`size` | Combo box render size. Type : `"sm" | "md" | "lg"` Default value : `"md"`
Defined in src/combobox/combobox.component.ts:171

`type` | Combo box type (supporting single or multi selection of items). Type : `"single" | "multi"` Default value : `"single"`
Defined in src/combobox/combobox.component.ts:167

### Outputs

`close` | emits an empty event when the menu is closed `$event` Type: `EventEmitter`
Defined in src/combobox/combobox.component.ts:232

`search` | `$event` Type: `EventEmitter`
Defined in src/combobox/combobox.component.ts:233

`selected` | Emits a ListItem Example:
         * {
         *         content: "one",
         *         selected: true
         * }
         *
`$event` Type: `EventEmitter`
Defined in src/combobox/combobox.component.ts:203

`submit` | Intended to be used to add items to the list. Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem Example:
         *    {
         *        items: [{content: "one", selected: true}, {content: "two", selected: true}],
         *        index: 1,
         *        value: {
         *            content: "some user string",
         *            selected: false
         *        }
         *    }
         *
Example:
         * {
         *    after: 1,
         *    value: "some user string"
         * }
         *
`$event` Type: `EventEmitter`
Defined in src/combobox/combobox.component.ts:230

### HostBindings

attr.role
`attr.role: ```
Default value : `"combobox"`
Defined in src/combobox/combobox.component.ts:239

class.bx--list-box__wrapper
`class.bx--list-box__wrapper: ```
Default value : `true`
Defined in src/combobox/combobox.component.ts:238

style.display
`style.display: ```
Default value : `"block"`
Defined in src/combobox/combobox.component.ts:240

### HostListeners

keydown
Arguments : `'$event'`
`keydown(ev: KeyboardEvent)`
Defined in src/combobox/combobox.component.ts:330
Handles `Escape` key closing the dropdown, and arrow up/down focus to/from the dropdown list.

### Methods

_noop
`_noop()`
Defined in src/combobox/combobox.component.ts:344
Returns : `void`

clearInput
`clearInput(event)`
Defined in src/combobox/combobox.component.ts:468
Parameters :
Name | Optional
event | No
Returns : `void`

Public clearSelected
`clearSelected()`
Defined in src/combobox/combobox.component.ts:379
Returns : `void`

Public closeDropdown
`closeDropdown()`
Defined in src/combobox/combobox.component.ts:396
Closes the dropdown and emits the close event. Returns : `void`

Public isTemplate
`isTemplate(value)`
Defined in src/combobox/combobox.component.ts:480
Parameters :
Name | Optional
value | No
Returns : `boolean`

ngAfterContentInit
`ngAfterContentInit()`
Defined in src/combobox/combobox.component.ts:276
Sets initial state that depends on child components Subscribes to select events and handles focus/filtering/initial list updates Returns : `void`

ngAfterViewInit
`ngAfterViewInit()`
Defined in src/combobox/combobox.component.ts:316
Binds event handlers against the rendered view Returns : `void`

ngOnChanges
`ngOnChanges(changes)`
Defined in src/combobox/combobox.component.ts:265
Lifecycle hook. Updates pills if necessary. Parameters :
Name | Optional
changes | No
Returns : `void`

onBlur
`onBlur()`
Defined in src/combobox/combobox.component.ts:359
Returns : `void`

Public onSearch
`onSearch(searchString)`
Defined in src/combobox/combobox.component.ts:423
Sets the list group filter, and manages single select item selection. Parameters :
Name | Optional
searchString | No
Returns : `void`

Public onSubmit
`onSubmit(event: KeyboardEvent)`
Defined in src/combobox/combobox.component.ts:457
Intended to be used to add items to the list. Parameters :
Name | Type | Optional
event | `KeyboardEvent` | No
Returns : `void`

Public openDropdown
`openDropdown()`
Defined in src/combobox/combobox.component.ts:404
Opens the dropdown. Returns : `void`

registerOnChange
`registerOnChange(fn: any)`
Defined in src/combobox/combobox.component.ts:363
Parameters :
Name | Type | Optional
fn | `any` | No
Returns : `void`

registerOnTouched
`registerOnTouched(fn: any)`
Defined in src/combobox/combobox.component.ts:367
Parameters :
Name | Type | Optional
fn | `any` | No
Returns : `void`

Public toggleDropdown
`toggleDropdown()`
Defined in src/combobox/combobox.component.ts:412
Toggles the dropdown. Returns : `void`

Public updatePills
`updatePills()`
Defined in src/combobox/combobox.component.ts:374
Called by `n-pill-input` when the selected pills have changed. Returns : `void`

Protected updateSelected
`updateSelected()`
Defined in src/combobox/combobox.component.ts:484
Returns : `void`

writeValue
`writeValue(value: any)`
Defined in src/combobox/combobox.component.ts:349
Parameters :
Name | Type | Optional
value | `any` | No
Returns : `void`

### Properties

Static comboBoxCount
`comboBoxCount: `number``
Type : `number`
Default value : `0`
Defined in src/combobox/combobox.component.ts:131

dropdownMenu
`dropdownMenu: ```
Decorators : `@ViewChild('dropdownMenu')`
Defined in src/combobox/combobox.component.ts:236

input
`input: `ElementRef``
Type : `ElementRef`
Decorators : `@ViewChild('input')`
Defined in src/combobox/combobox.component.ts:237

Protected noop
`noop: ```
Default value : `this._noop.bind(this)`
Defined in src/combobox/combobox.component.ts:251

Protected onTouchedCallback
`onTouchedCallback: `function``
Type : `function`
Default value : `this._noop`
Defined in src/combobox/combobox.component.ts:252

Public open
`open: ```
Default value : `false`
Defined in src/combobox/combobox.component.ts:242

Public pills
`pills: `[]``
Type : `[]`
Default value : `[]`
Defined in src/combobox/combobox.component.ts:247
Selected items for multi-select combo-boxes.

Protected propagateChangeCallback
`propagateChangeCallback: `function``
Type : `function`
Default value : `this._noop`
Defined in src/combobox/combobox.component.ts:253

Public selectedValue
`selectedValue: `string``
Type : `string`
Default value : `""`
Defined in src/combobox/combobox.component.ts:249
used to update the displayValue

Public showClearButton
`showClearButton: ```
Default value : `false`
Defined in src/combobox/combobox.component.ts:244

view
`view: `AbstractDropdownView``
Type : `AbstractDropdownView`
Decorators : `@ContentChild(AbstractDropdownView)`
Defined in src/combobox/combobox.component.ts:235
ContentChild reference to the instantiated dropdown list

    import {
    	Component,
    	OnChanges,
    	ContentChild,
    	Input,
    	Output,
    	HostListener,
    	ElementRef,
    	ViewChild,
    	EventEmitter,
    	AfterViewInit,
    	AfterContentInit,
    	HostBinding,
    	TemplateRef
    } from "@angular/core";
    import { AbstractDropdownView } from "./../dropdown/abstract-dropdown-view.class";
    import { ListItem } from "./../dropdown/list-item.interface";
    import { NG_VALUE_ACCESSOR } from "@angular/forms";
    import { filter } from "rxjs/operators";

    /**
     * ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.
     * Multi-select comboboxes also provide "pills" of selected items.
     *
     * [See demo](../../?path=/story/combobox--basic)
     *
     * <example-url>../../iframe.html?id=combobox--basic</example-url>
     */
    @Component({
    	selector: "ibm-combo-box",
    	template: `
    		<label *ngIf="label" [for]="id" class="bx--label">
    			<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
    			<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
    		</label>
    		<div *ngIf="helperText" class="bx--form__helper-text">
    			<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
    			<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
    		</div>
    		<div
    			[ngClass]="{
    				'bx--multi-select': type === 'multi',
    				'bx--combo-box': type === 'single' || !pills.length
    			}"
    			class="bx--combo-box bx--list-box"
    			role="listbox"
    			[attr.data-invalid]="(invalid ? true : null)">
    			<div
    				[attr.aria-expanded]="open"
    				role="button"
    				class="bx--list-box__field"
    				type="button"
    				tabindex="-1"
    				aria-label="close menu"
    				aria-haspopup="true"
    				(click)="toggleDropdown()">
    				<div
    					*ngIf="type === 'multi' && pills.length > 0"
    					(click)="clearSelected()"
    					role="button"
    					class="bx--list-box__selection bx--list-box__selection--multi"
    					title="Clear all selected items">
    					{{ pills.length }}
    					<svg
    						focusable="false"
    						preserveAspectRatio="xMidYMid meet"
    						style="will-change: transform;"
    						role="img"
    						xmlns="http://www.w3.org/2000/svg"
    						width="16"
    						height="16"
    						viewBox="0 0 16 16"
    						aria-hidden="true">
    						<path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path>
    					</svg>
    				</div>
    				<input
    					#input
    					[id]="id"
    					[disabled]="disabled"
    					(keyup)="onSearch($event.target.value)"
    					(keydown.enter)="onSubmit($event)"
    					[value]="selectedValue"
    					class="bx--text-input"
    					role="searchbox"
    					tabindex="0"
    					[attr.aria-label]="label"
    					aria-haspopup="true"
    					autocomplete="off"
    					[placeholder]="placeholder"/>
    				<ibm-icon-warning-filled16 *ngIf="invalid" class="bx--list-box__invalid-icon"></ibm-icon-warning-filled16>
    				<div
    					*ngIf="showClearButton"
    					role="button"
    					class="bx--list-box__selection"
    					tabindex="0"
    					aria-label="Clear Selection"
    					title="Clear selected item"
    					(click)="clearInput($event)">
    					<ibm-icon-close16></ibm-icon-close16>
    				</div>
    				<ibm-icon-chevron-down16
    					[ngClass]="{'bx--list-box__menu-icon--open': open}"
    					class="bx--list-box__menu-icon"
    					ariaLabel="Close menu">
    				</ibm-icon-chevron-down16>
    			</div>
    			<div
    				#dropdownMenu
    				*ngIf="open">
    				<ng-content></ng-content>
    			</div>
    		</div>
    		<div *ngIf="invalid">
    			<div *ngIf="!isTemplate(invalidText)" class="bx--form-requirement">{{ invalidText }}</div>
    			<ng-template
    				*ngIf="isTemplate(invalidText)"
    				[ngTemplateOutlet]="invalidText">
    			</ng-template>
    		</div>
    	`,
    	providers: [
    		{
    			provide: NG_VALUE_ACCESSOR,
    			useExisting: ComboBox,
    			multi: true
    		}
    	]
    })
    export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit {
    	static comboBoxCount = 0;
    	@Input() id = `dropdown-${ComboBox.comboBoxCount++}`;
    	/**
    	 * List of items to fill the content with.
    	 *
    	 * **Example:**
    	 * ```javascript
    	 * items = [
    	 *		{
    	 *			content: "Abacus",
    	 *			selected: false
    	 *		},
    	 *		{
    	 *			content: "Byte",
    	 *			selected: false,
    	 *		},
    	 *		{
    	 *			content: "Computer",
    	 *			selected: false
    	 *		},
    	 *		{
    	 *			content: "Digital",
    	 *			selected: false
    	 *		}
    	 * ];
    	 * ```
    	 *
    	 */
    	@Input() items: Array<ListItem> = [];
    	/**
    	 * Text to show when nothing is selected.
    	 */
    	@Input() placeholder = "Filter...";
    	/**
    	 * Combo box type (supporting single or multi selection of items).
    	 */
    	@Input() type: "single" | "multi" = "single";
    	/**
    	 * Combo box render size.
    	 */
    	@Input() size: "sm" | "md" | "lg" = "md";
    	/**
    	 * Label for the combobox.
    	 */
    	@Input() label: string | TemplateRef<any>;
    	/**
    	 * Sets the optional helper text.
    	 */
    	@Input() helperText: string | TemplateRef<any>;
    	/**
    	 * Set to `true` for invalid state.
    	 */
    	@Input() invalid = false;
    	/**
    	 * Value displayed if dropdown is in invalid state.
    	 */
    	@Input() invalidText: string | TemplateRef<any>;
    	/**
    	 * Set to `true` to disable combobox.
    	 */
    	@HostBinding("attr.aria-disabled") @Input() disabled = false;
    	/**
    	 * Emits a ListItem
    	 *
    	 * Example:
    	 * ```javascript
    	 * {
    	 * 		content: "one",
    	 * 		selected: true
    	 * }
    	 * ```
    	 */
    	@Output() selected = new EventEmitter<ListItem | ListItem[]>();
    	/**
    	 * Intended to be used to add items to the list.
    	 *
    	 * Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem
    	 *
    	 * Example:
    	 * ```javascript
    	 *	{
    	 *		items: [{content: "one", selected: true}, {content: "two", selected: true}],
    	 *		index: 1,
    	 *		value: {
    	 *			content: "some user string",
    	 *			selected: false
    	 *		}
    	 *	}
    	 * ```
    	 *
    	 *
    	 * Example:
    	 * ```javascript
    	 * {
    	 *	after: 1,
    	 *	value: "some user string"
    	 * }
    	 * ```
    	 */
    	@Output() submit = new EventEmitter<any>();
    	/** emits an empty event when the menu is closed */
    	@Output() close = new EventEmitter<any>();
    	@Output() search = new EventEmitter<any>();
    	/** ContentChild reference to the instantiated dropdown list */
    	@ContentChild(AbstractDropdownView) view: AbstractDropdownView;
    	@ViewChild("dropdownMenu") dropdownMenu;
    	@ViewChild("input") input: ElementRef;
    	@HostBinding("class.bx--list-box__wrapper") hostClass = true;
    	@HostBinding("attr.role") role = "combobox";
    	@HostBinding("style.display") display = "block";

    	public open = false;

    	public showClearButton = false;

    	/** Selected items for multi-select combo-boxes. */
    	public pills = [];
    	/** used to update the displayValue */
    	public selectedValue = "";

    	protected noop = this._noop.bind(this);
    	protected onTouchedCallback: () => void = this._noop;
    	protected propagateChangeCallback: (_: any) => void = this._noop;

    	/**
    	 * Creates an instance of ComboBox.
    	 */
    	constructor(protected elementRef: ElementRef) {}

    	/**
    	 * Lifecycle hook.
    	 * Updates pills if necessary.
    	 *
    	 */
    	ngOnChanges(changes) {
    		if (changes.items) {
    			this.view.items = changes.items.currentValue;
    			this.updateSelected();
    		}
    	}

    	/**
    	 * Sets initial state that depends on child components
    	 * Subscribes to select events and handles focus/filtering/initial list updates
    	 */
    	ngAfterContentInit() {
    		if (this.view) {
    			this.view.type = this.type;
    			this.view.select.subscribe(event => {
    				if (this.type === "multi") {
    					this.updatePills();
    					this.propagateChangeCallback(this.view.getSelected());
    				} else {
    					if (event.item && event.item.selected) {
    						this.showClearButton = true;
    						this.selectedValue = event.item.content;
    						this.propagateChangeCallback(event.item);
    					} else {
    						this.selectedValue = "";
    						this.propagateChangeCallback(null);
    					}
    					// not guarding these since the nativeElement has to be loaded
    					// for select to even fire
    					this.elementRef.nativeElement.querySelector("input").focus();
    					this.view.filterBy("");
    					this.closeDropdown();
    				}
    				this.selected.emit(event);
    			});
    			this.view.items = this.items;
    			// update the rest of combobox with any pre-selected items
    			// setTimeout just defers the call to the next check cycle
    			setTimeout(() => {
    				this.updateSelected();
    			});

    			this.view.blurIntent.pipe(filter(v => v === "top")).subscribe(() => {
    				this.elementRef.nativeElement.querySelector(".bx--text-input").focus();
    			});
    		}
    	}

    	/**
    	 * Binds event handlers against the rendered view
    	 */
    	ngAfterViewInit() {
    		document.addEventListener("click", ev => {
    			if (!this.elementRef.nativeElement.contains(ev.target)) {
    				if (this.open) {
    					this.closeDropdown();
    				}
    			}
    		});
    	}

    	/**
    	 * Handles `Escape` key closing the dropdown, and arrow up/down focus to/from the dropdown list.
    	 */
    	@HostListener("keydown", ["$event"])
    	hostkeys(ev: KeyboardEvent) {
    		if (ev.key === "Escape") {
    			this.closeDropdown();
    		} else if ((ev.key === "ArrowDown" || ev.key === "Down") // `"Down"` is IE specific value
    			&& (!this.dropdownMenu || !this.dropdownMenu.nativeElement.contains(ev.target))) {
    			ev.stopPropagation();
    			this.openDropdown();
    			setTimeout(() => this.view.getCurrentElement().focus(), 0);
    		}
    	}

    	/*
    	 * no-op method for null event listeners, and other no op calls
    	 */
    	_noop() {}

    	/*
    	 * propagates the value provided from ngModel
    	 */
    	writeValue(value: any) {
    		if (value) {
    			if (this.type === "single") {
    				this.view.propagateSelected([value]);
    			} else {
    				this.view.propagateSelected(value);
    			}
    		}
    	}

    	onBlur() {
    		this.onTouchedCallback();
    	}

    	registerOnChange(fn: any) {
    		this.propagateChangeCallback = fn;
    	}

    	registerOnTouched(fn: any) {
    		this.onTouchedCallback = fn;
    	}

    	/**
    	 * Called by `n-pill-input` when the selected pills have changed.
    	 */
    	public updatePills() {
    		this.pills = this.view.getSelected() || [];
    		this.propagateChangeCallback(this.view.getSelected());
    	}

    	public clearSelected() {
    		this.items = this.items.map(item => {
    			if (!item.disabled) {
    				item.selected = false;
    			}
    			return item;
    		});
    		this.view.items = this.items;
    		this.updatePills();
    		// clearSelected can only fire on type=multi
    		// so we just emit getSelected() (just in case there's any disabled but selected items)
    		this.selected.emit(this.view.getSelected() as any);
    	}

    	/**
    	 * Closes the dropdown and emits the close event.
    	 */
    	public closeDropdown() {
    		this.open = false;
    		this.close.emit();
    	}

    	/**
    	 * Opens the dropdown.
    	 */
    	public openDropdown() {
    		if (this.disabled) { return; }
    		this.open = true;
    	}

    	/**
    	 * Toggles the dropdown.
    	 */
    	public toggleDropdown() {
    		if (this.open) {
    			this.closeDropdown();
    		} else {
    			this.openDropdown();
    		}
    	}

    	/**
    	 * Sets the list group filter, and manages single select item selection.
    	 */
    	public onSearch(searchString) {
    		this.search.emit(searchString);
    		if (searchString && this.type === "single") {
    			this.showClearButton = true;
    		} else {
    			this.showClearButton = false;
    		}
    		this.view.filterBy(searchString);
    		if (searchString !== "") {
    			this.openDropdown();
    		} else {
    			this.selectedValue = "";
    		}
    		if (this.type === "single") {
    			// deselect if the input doesn't match the content
    			// of any given item
    			const matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));
    			if (!matches) {
    				const selected = this.view.getSelected();
    				if (selected && selected[0]) {
    					selected[0].selected = false;
    					// notify that the selection has changed
    					this.view.select.emit({ item: selected[0] });
    					this.propagateChangeCallback(null);
    				} else {
    					this.view.filterBy("");
    				}
    			}
    		}
    	}

    	/**
    	 * Intended to be used to add items to the list.
    	 */
    	public onSubmit(event: KeyboardEvent) {
    		this.submit.emit({
    			items: this.view.getListItems(),
    			index: 0,
    			value: {
    				content: (event.target as HTMLInputElement).value,
    				selected: false
    			}
    		});
    	}

    	clearInput(event) {
    		event.stopPropagation();
    		event.preventDefault();

    		this.input.nativeElement.value = "";

    		this.clearSelected();
    		this.closeDropdown();

    		this.showClearButton = false;
    	}

    	public isTemplate(value) {
    		return value instanceof TemplateRef;
    	}

    	protected updateSelected() {
    		const selected = this.view.getSelected();
    		if (this.type === "multi" ) {
    			this.updatePills();
    		} else if (selected && selected[0]) {
    			this.selectedValue = selected[0].content;
    			this.propagateChangeCallback(selected[0]);
    		}
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""