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 [class.igx-input-group--required]="isRequired" [class.igx-input-group--invalid]="!selected.valid"> <input igxInput #inputForm (keyup.enter)="null" class="search-input" (keydown)="toggleDropDown($event)" (input)="onSearch($event.target.value)" (change)="clearSelected($event)" (focusout)="clickedOutside($event)" (keydown.ArrowDown)="openDropDown()" type="text" [igxDropDownItemNavigation]="dropdown" /> <label igxLabel>{{label}} <span *ngIf="isRequired"> *</span></label> </igx-input-group> <igx-drop-down #dropdown (onSelection)="itemSelection($event)" (onOpened)="onDropDownOpen()" (onClosed)="onDropDownClose()"> <igx-drop-down-item *ngFor="let item of selectOptions" [value]="item.value"> <div class="igx-drop-down__item-template"> <span>{{item.name}}</span> </div> </igx-drop-down-item> </igx-drop-down> </div> </form>
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 ?
Hi Alex,Thanks for reaching out to Infragistics!The input's default `(change)` event fires when the input loses focus (so the value is 'final'). The drop down does *not* take focus by default, so that should not be causing a problem.Please review the following sample.As far as I understand, you have a similar setup on your end. As you can see, the drop-down's value changing (either via click or via Enter/Space) does not cause `input.change` to be fired.Could you you please verify that none of the other methods force the input to lose focus (and triggering a `change` event)?Hope this helps!
Ok i was able to extract the relevant part of code into stackblitz. StackBlitz Sample. If you go and enter some name like Alex you will get my name in the dropdown. Then if you go and select it it will show you the second drop down as we use *ngif the childid is set. Once you click on the dropdown of the relationship this is where it gets reset and because the clientid is "" form removes drop down. Now if you go and erase part of name and get popup again and select name again. Relationship dropdown shows and you can select it without the clientid being set to "". On another note is there a reason that we don't show the matches in the type ahead input when we delete char. I see the requests made to server and the data returned but not always get an popup with the matches.