Hide dropdown window and insert new value with enter keyboard button click

[alessandroperetti]

Hi,

I am using the multiselect with the following settings:

this.defaultDropdownSettings = {
      singleSelection: false, 
      text: this.translate.instant('VALUE'),
      selectAllText: "",
      unSelectAllText: "",
      enableSearchFilter: true,
      enableFilterSelectAll: false,
      searchPlaceholderText: this.translate.instant('VALUE'),
      noDataLabel: "",
      showCheckbox: false,
      badgeShowLimit: 8,
      addNewItemOnFilter: true,
      addNewButtonText: this.translate.instant('ADD'),
      classes:"form-control-unset"
    }

and in the component:

   <angular2-multiselect 
        [settings]="defaultDropdownSettings"
        [data]="defaultDropdownList"
        [(ngModel)]="selectedItems[f.property]" 
        (onAddFilterNewItem)="onAddItem($event, f.property)"
      >
    </angular2-multiselect>

I have enabled the addNewItemOnFilter because I would add the value is being inserted by the user. The data of the dropdown is empty because I am using it like an input form. So, I would hide the dropdown window (with the add button) having the possibility to add the value being inserted on enter click without using the add button (it is hide). This is my GUI so far:

I have read many times the docs but I didn't find a solution for this, so far (is it possible?)

Thank you in advance.

[alessandroperetti]

Finally I got the solution inserting ng-template overriding the default input text for search:

  <angular2-multiselect 
                    [settings]="defaultDropdownSettings"
                    [data]="defaultDropdownList"
                    [(ngModel)]="selectedItems[f.property]" 
                  >
                      <c-search>
                          <ng-template>
                            <input 
                              [attr.id]="f.property"
                              [cleave]="cleaveOptions[f.property] || {}"
                              type="text" 
                              (keypress)="onSearch($event, f.property)"
                            />
                          </ng-template>
                      </c-search>
                  </angular2-multiselect>`

Attaching onSearch on (keypress) I can evaluate if the clicked key was enter button (keycode 13):

onSearch(e, prop){
    if(e.keyCode === this.ENTER_KEY_CODE && e.target.value !== ''){
      length = this.selectedItems[prop].length
      this.selectedItems[prop].push({"id": length , "itemName": e.target.value})
      document.getElementById(e.target.id)['value'] = '';
    }
  }