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 a lot for sending is over, it's a big help to understand the scenario better!The click on the first drop-down does not fire the `change` event, as the focus is still on the input. Then, when the second drop-down shows up and the user proceeds to click in it, the focus is removed from the first input, the `change` event fires, setting `this.selected.value` to an empty string, hiding the second drop-down.A way you can work around this is to bind the input to a `searchValue` property using `[(ngModel)]` and then fire the `clearSelection()` event on `ngModelChange`. This way, when the value of the input changes, the clear event will always fire. (So when the user is in the process of typing a new name and the requests are fired, the second drop-down will disappear)The drop-down not showing up on deletion seems to only happen when going from the second input back to the first one. A workaround could be to check the drop-down every time the value of the `selectOptions` changes - if it's currently hidden and the input is focused - show it again.You can see if the above approaches work in your scenario in this updated StackBlitz sample.Lastly, I'd just like to point out that we also have an `igxAutoComplete` directive - it behaves in a similar way to the custom one you're setting up.If you have the time, you could check it out - maybe it could be of use to. If not, we'd love to hear your feedback about possible enhancements to it!
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.
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!