0

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>
Nayana Setty
  • 1,001
  • 1
  • 12
  • 34

1 Answers1

1

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>
rcanpahali
  • 2,565
  • 2
  • 21
  • 37
  • separatorKeyCodes has to be in "tag-input" control. With this when I press Tab, focus is on First element, but it is not selected. Again I have to press enter to select. Is there a way, I can configure tag-input drop-down to select Item based on Tab rather than ENTER. IF i put separatorKeyCodes in tag-input-dropdown we get error as not supported. – Nayana Setty Jul 10 '19 at 07:59