Combobox - use it as chips (without options)

[ph55]

There should be option to use combobox without dropdown.
Type something, press enter – and it will add new value.

Basically combobox is also known as "chips" element and in every well known implementation you can add value without dropdown as well.

Use cases could be: search by list of user ID's, add list of IP's, add list of email to blacklist, etc.

Material example:
https://material.angular.io/components/chips/overview

[ph55]

Well, current API makes it possible with few adjustments:

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { ClrCombobox } from '@clr/angular';

@Component({
  selector: 'app-chips',
  template: `
    <clr-combobox-container>
      <label>Chips</label>
      <clr-combobox
        [(ngModel)]="chips"
        [clrMulti]="true"
        (keyup.enter)="addChips($any($event.target).value)"
      >
        <ng-container *clrOptionSelected="let selected">
          {{ selected }}
        </ng-container>
        <clr-options style="display: none"></clr-options>
      </clr-combobox>
    </clr-combobox-container>
  `,
})
export class ChipsComponent implements AfterViewInit {
  chips!: string[];

  @ViewChild(ClrCombobox) box!: ClrCombobox<string>;

  ngAfterViewInit(): void {
    // Register function that will be called by clarity on input blur (loosing focus).
    // We want to save chips on blur as well.
    this.box.registerOnTouched(() => {
      this.addChips(this.box.textbox.nativeElement.value);
    });
  }

  addChips(val: string): void {
    if (val === '') {
      return;
    }

    this.box.optionSelectionService.select(val);
    this.box.searchText = '';
  }
}

CSS:

.clr-combobox-wrapper {
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
}

[clrpopoveropenclosebutton] {
  display: none;
}

The result:

Screen.Recording.2021-05-23.at.10.36.38.mov

[Jinnie]

Thanks for the suggestion and the demo!
I think we'd want to consider this scenario once we start implementing the Clarity Core combobox. Either as configuration, or as a separate "sibling" component.