Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Issue with Change Event on igxInput

I am trying to build a custom component which uses igxInput and an IgsDropdown component in Angular. The user types a User name and we fire of a query to narrow down the list of names we display for the user to select. Al good so far. Once the user selects a name from the list we show another dropdown box which shows the relationship type of the Person.

<form novalidate [formGroup]="form">

    <div class="inputs">
        <igx-input-group #inputGroup
            <input igxInput #inputForm (keyup.enter)="null"
                   type="text" [igxDropDownItemNavigation]="dropdown" />
            <label igxLabel>{{label}} <span *ngIf="isRequired">&nbsp;*</span></label>

        <igx-drop-down #dropdown (onSelection)="itemSelection($event)"
            <igx-drop-down-item *ngFor="let item of selectOptions"
                <div class="igx-drop-down__item-template">


i register a change hook on the Input (change)="clearSelected($event)" so if the user changes the value we will remove the selected value which in turn invalidates the control and prevents user from submitting. So far all works except every time i click on the dropdown of the dropdown box it for some reason it calls the change event on first one. Then the second time it no longer does that. So how can i make sure the change event is only called when the input value actually changes ?