Combobox: Disable component filtering for server-driven filtering.

[dpoehls]

Summary

I'm attempting to implement a server-driven combobox that uses the text portion of the component to query a long search field on an API endpoint that returns a list of objects. In this instance, I'm attempting to search for a "customer". There are many fields we may want to search against to find the given customer, like "name", "account", "circuit ID", etc. If I create a single display field with all of those, the will get quite long. If I implement this today, my API returns the expected results, but the component then does a text filter on the display field, which further limits the results to only the ones that match the display string.

Examples

Perhaps something like this could work:

In combobox/option-items.directive, add:

@Input('clrOptionItemsNoFilter')
  public set noFilter(noFilter: boolean) {
    this._filterDisabled = noFilter;
  }

...
...
in private updateItems(), change:

if (this._filterField) {
      this.filteredItems = this._rawItems.filter(item => {

...
...
to:

if (this._filterDisabled) {
this.filteredItems = this._rawItems;
} else if (this._filterField) {
this.filteredItems = this._rawItems.filter(item => {

This then would be the implementation change in the template.
current:
<clr-option *clrOptionItems="let state of states; field:'name'" [clrValue]="state">
proposed:
<clr-option *clrOptionItems="let state of states; **noFilter:true;** field:'name'" [clrValue]="state">
The other way I could see this specific limitation being solved, would be to add an additional field to separate the filter and display functionality of this element. Today, the "field" is used for both the display field, and the filter field.

Conclusion

I don't believe this would be too difficult to implement (I've forked the repo already and implemented the "noFilter" version of this), but it does change the API and I'm not sure whether this will cause other issues or not.

Thanks,

[mathisscott]

@Jinnie @hippee-lee @gnomeontherun

What's your temperature on this feature request?

[Jinnie]

My first thoughts are that this may be attempted with the static combobox version:
https://clarity.design/angular-components/combobox/#basic-static-combobox
It's the *clrOptionItems smart iterator that does the filtering. When it's omitted (and a simple *ngFor used instead), the server-side scenario should be achievable. Similar to the datagrid.

[dpoehls]

Thanks a lot for the quick response. I have tried that, and hit a similar sort of wall. Since I'm attempting to use this with an array of objects, I need to return the object (or just the ID - and I can get the object from there in a function called on selection change) but if I use the object, it displays "[object Object]" after selecting, and if I use the ID, I just see the integer and not what was in the list.

this displays [object Object]
<clr-combobox-container> <label>Customer</label> <clr-combobox formControlName="customer" (clrSelectionChange)="selectCustomer($event)" (clrInputChange)="updateCustomers($event)" [clrLoading]="loadingCustomers"> <clr-options> <clr-option *ngFor="let customer of availableCustomers | async" [clrValue]="customer"> {{ customer.agreement }} ({{ customer.name }}) </clr-option> </clr-options> </clr-combobox> <clr-control-helper>Helper text</clr-control-helper> <clr-control-error></clr-control-error> </clr-combobox-container>

this displays an integer ID
<clr-combobox-container> <label>Customer</label> <clr-combobox formControlName="customer" (clrSelectionChange)="selectCustomer($event)" (clrInputChange)="updateCustomers($event)" [clrLoading]="loadingCustomers"> <clr-options> <clr-option *ngFor="let customer of availableCustomers | async" [clrValue]="customer.id"> {{ customer.agreement }} ({{ customer.name }}) </clr-option> </clr-options> </clr-combobox> <clr-control-helper>Helper text</clr-control-helper> <clr-control-error></clr-control-error> </clr-combobox-container>

That being said - I can probably make this work by just generating a unique display field in my database and using that for everything and parsing out the ID from it. This definately gets me closer.

I imagine what I'm trying to do (search for something that isn't necessarily in the results list) may be a corner case, but I could see it in other situations like a global full-text search or the like.

I appreciate the response, and love the project - thanks again!

[Jinnie]

Well, when it's done client side, it searches all fields if no specific filter field is supplied to the *clrOptionItems
But how/if this may cooperate with a server-driven filtering should take a bit of research.

That's the code I'm looking at:
https://github.com/vmware/clarity/blob/2a7ce9d20df46454497b847a5d8ed9fb0371eda2/packages/angular/projects/clr-angular/src/forms/combobox/option-items.directive.ts#L77-L90

[dpoehls]

Yeah, without the 'field' applied to the smart iterator, I can't find a way to use an array of objects, and have it put useful text in the textbox after selection. If I do put the 'field' in there, it displays correctly, but filters again what the server is filtering. What I ended up doing is this (in the same code you reference - only putting in relevent parts)

private _filterDisabled = false;

@Input('clrOptionItemsNoFilter')
  public set noFilter(noFilter: boolean) {
    this._filterDisabled = noFilter;
  }

  private updateItems() {
    if (!this._rawItems || this.filter === undefined || this.filter === null) {
      return;
    }
    if (this._filterDisabled) {
      this.filteredItems = this._rawItems;
    } else if (this._filterField) {
      this.filteredItems = this._rawItems.filter(item => {
        const objValue = (item as any)[this._filterField];
        return objValue ? objValue.toString().toLowerCase().indexOf(this.filter.toLowerCase().toString()) > -1 : false;
      });
    } else {
      // Filter by all item object values
      this.filteredItems = this._rawItems.filter(item => {
        if (typeof item !== 'object') {
          return item.toString().toLowerCase().indexOf(this.filter.toString().toLowerCase()) > -1;
        }
        const objValues = Object.values(item).filter(value => {
          return value ? value.toString().toLowerCase().indexOf(this.filter.toString().toLowerCase()) > -1 : false;
        });
        return objValues.length > 0;
      });
    }
    this.iterableProxy.ngForOf = this.filteredItems;
  }