CODEWITHSUNDEEP
angularangular7ngx-chips
Nayana Setty
Nayana Setty

Reputation: 1001

Select Drop down list item on Tab click in ngx-chips

We are using ngx-chips for autocomplete text box, where we are fetching data from the remote source. If we copy paste an item and press Tab button we need to select the single item. But this is not working.

Any help will be highly appreciated.

Our code is as below

 <tag-input formControlName="Tag"
            placeholder = "select"
            secondaryPlaceholder = "select"
            [validators]="Validator"
            [onlyFromAutocomplete]="true"
            [onTextChangeDebounce] = "1000"
            (keyup)="onSearchType($event.target.value)"            
            class="tag-input-class tag-inp"
            >
                <tag-input-dropdown
                  [autocompleteItems]="List"
                  [dynamicUpdate]="true"
                  [appendToBody]="true"
                  [showDropdownIfEmpty]="false"
                  [keepOpen]="false" 
                  [zIndex] = "1000000"
                  [displayBy]="'property'"
                  [identifyBy] ="'property'"            
                >
                </tag-input-dropdown>
              </tag-input>

Upvotes: 1

Views: 1604

Answers (1)

rcanpahali
rcanpahali

Reputation: 2643

You can use separatorKeyCodes attribute to achieve this,

 <tag-input formControlName="Tag"
            placeholder = "select"
            secondaryPlaceholder = "select"
            [validators]="Validator"
            [onlyFromAutocomplete]="true"
            [onTextChangeDebounce] = "1000"
            [separatorKeyCodes]="'TAB'" or "TAB" or "[TAB]" //please try this            
            (keyup)="onSearchType($event.target.value)"            
            class="tag-input-class tag-inp">
                <tag-input-dropdown
                  [autocompleteItems]="List"
                  [dynamicUpdate]="true"
                  [appendToBody]="true"
                  [showDropdownIfEmpty]="false"
                  [keepOpen]="false" 
                  [zIndex] = "1000000"
                  [displayBy]="'property'"
                  [identifyBy] ="'property'">
                </tag-input-dropdown>
              </tag-input>

Upvotes: 1

Related Questions