typeahead eventemiter issue before

assignments.html

<rl-typeahead-list ng-model="card.assignments.userAssignments" get-items="card.getEngineers()" label="Engineer" transform="'name'"
							use-client-searching="true" add="card.assignEngineer(item)" remove="card.removeEngineer(item)"
							item-as="assignment" list-data="{ count: card.count }">
			<rl-list-header>
				<div class="col-sm-12">Engineer</div>
			</rl-list-header>
			<rl-list-item>
				<div class="col-xs-8 form-control-static">{{assignment.name}}</div>
				<div class="col-xs-4 text-right" ng-hide="listData.count() == 1">
					<rl-button-async size="sm" type="danger" action="$remove(assignment)" style="margin-top: 4px">
						<i class="fa fa-remove"></i> <span class="btn-hide-text">Remove</span>
					</rl-button-async>
				</div>
				<div class="col-xs-4 text-right form-control-static" ng-show="listData.count() == 1"><label>required</label></div>
			</rl-list-item>
		</rl-typeahead-list>

typeahead.html

<input class="form-control rl-select-trigger"
			   type="text"
			   [disabled]="disabled"
			   [class.rl-select-open]="list.showOptions"
			   [class.hide-placeholder]="hidePlaceholder"
			   [placeholder]="placeholder"
			   [value]="search"
			   (focus)="showLabel()"
			   (blur)="hideLabelIfEmpty()"
			   rlPopoutTrigger
			   (input)="searchStream.next($event.target.value)" />
		<rlPopoutList [disabled]="!canShowOptions"
					  [options]="visibleItems$ | async"
					  [template]="template"
					  [transform]="transform"
					  (select)="selectItem($event)">
			<rlPopoutItem class="rl-select-option-custom" *ngIf="allowCustomOption" (trigger)="selectCustom()">{{search}}</rlPopoutItem>
		</rlPopoutList>

typeahead.ts

export class TypeaheadComponent<T> extends ValidatedInputComponent<T> implements OnInit, OnChanges {
	@Input() transform: __transform.ITransform<T, string>;
	@Input() getItems: { (search?: string): Promise<T[]> | Observable<T[]> };
	@Input() prefix: string;
	@Input() clientSearch: boolean;
	@Input() allowCollapse: boolean;
	@Input() create: { (value: string): T };
	@Output() select: EventEmitter<T> = new EventEmitter<T>();

typeaheadList.html

<rlTypeahead (select)="add($event)"
					 [allowCollapse]="false"
					 [transform]="transform"
					 [getItems]="searchItems"
					 [label]="label"
					 [prefix]="prefix"
					 [disabled]="disabled"></rlTypeahead>

TL;DR; Be careful what you name event emitters, they can be triggered by other events named the same thing in a child element.

Take a look at the gists above. Inside of the typeaheadlist component we are setting up a function on the select event on the typeaheadlist. This all seems normal (and works). The problem comes to light all the way down in the typeahead component html file. Notice we are using a input element. The input box has a native select event that one can use. Since we are calling our event emitter in the typeahead a select we are getting unintended consequences. When a user triggers the native input box's select event (selects data in the input) it is also triggering our own select event emitter causing blank records to be submitted to the list.