Ngx-chips: focusFirstElement does not work

[tonysparks]

Hello,

The tag-input-dropdown focusFirstElement doesn't appear to work. When the dropdown appears, the first element is not selected, which requires the user to press the down arrow key.

Here is an example application.

Example:

<tag-input [ngModel]="[]"
                       [placeholder]="'Enter a new repo'"
                       [secondaryPlaceholder]="'Search in Github'"
                       [onlyFromAutocomplete]="true">
                <tag-input-dropdown [autocompleteObservable]="requestAutocompleteItems"
                                     [focusFirstElement]="true">
                    <template let-item="item" let-index="index">
                        {{ item.display }}
                    </template>
                </tag-input-dropdown>
</tag-input>

Thank you,

Tony

[Gbuomprisco]

Must be a regression in ng2-material-dropdown :| will fix there and upgrade here

[rosslavery]

I can verify this issue is occurring for me as well.

[Gbuomprisco]

Yep it is definitely an issue: the focus function is called before the items actually are parsed by the template (although existing in the model). I will have to fix it in the ng2-material-dropdown

[Gbuomprisco]

https://github.com/Gbuomprisco/ng2-tag-input/pull/185

[Gbuomprisco]

Will be fixed by https://github.com/Gbuomprisco/ng2-tag-input/pull/187

[tonysparks]

Thank you @Gbuomprisco!

It seems to be working correctly most of the time. I think I found a slight corner case when this feature is coupled with matchingFn:

    // ignore any leading/trailing whitespace
    public customMatchingFn (value: string, target: any) : boolean {
        if(target.value != null) {
            if(target.value.toLowerCase().includes(value.trim().toLowerCase())) {
                return true;
            }
        }
        return false;
    }

Steps:

1) Tagify an entry
2) enter in a space
3) start typing
4) notice the first element is not highlighted, however if you press enter, the first element is tagified correctly.

[paninee]

@Gbuomprisco

this is issue is still happening. Here's the sample code

<tag-input
  formControlName='attributes'
  [placeholder]="('add more +' | translate)"
  [secondaryPlaceholder]="('enter amenities +' | translate)"
  [onlyFromAutocomplete]="true"
  [separatorKeys]="[',',';']"
  [clearOnBlur]="true">
  <tag-input-dropdown
    name="attributes"
    [autocompleteObservable]="searchAttribute"
    [displayBy]="'display'"
    [identifyBy]="'_id'"
    [focusFirstElement]="true"
    [showDropdownIfEmpty]="true">
    <ng-template let-item="item" let-index="index">
        {{ item.display }}
    </ng-template>
  </tag-input-dropdown>
</tag-input>

[phare2013]

I am still having the that issue as well. Please, it would be nice to see this bug addressed. The search suggestion functionality is a powerful part of this component's usefulness.

[bartholomej]

@Gbuomprisco yes, same issue.
Angular 7.2.15 + ngx-chips 1.9.8 or 2.0.0-beta.0
Here is what we know about this issue. Maybe this will help. https://github.com/Gbuomprisco/ngx-chips/issues/815#issuecomment-487902951