mdb-auto-completer mdb-option value is typed to string


Topic: mdb-auto-completer mdb-option value is typed to string

pzimmer pro premium priority asked 3 years ago

Expected behavior mdb-auto-completer has an attribute, displayValue, that allows you to specify a function to convert an object to a string for display with the select value.

Actual behavior This seems to work, but an error is created in typescript. I believe this is due to the value alltribute of the mdb-option being type string instead of any or string | any.

Resources (screenshots, code snippets etc.) error

    <input type="text"
       class="completer-input form-control mdb-autocomplete mb-0"
       [(ngModel)]="searchText2"
       (ngModelChange)="findEmployees()"
       [mdbAutoCompleter]="auto"
       mdbInput
       placeholder="Pick the employee" />
<mdb-auto-completer [disabled]="disabled || readonly" #auto="mdbAutoCompleter" textNoResults="No results" [displayValue]="onDisplayValue">
  <mdb-option *ngFor="let option of data" [value]="option">
    <div class="d-flex flex-column">
      <strong>Name: {{ option.displayName }}</strong>
      <small>Title: {{ option.title }}</small>
      <small>Phone: {{ option.workPhone }}</small>
    </div>
  </mdb-option>
</mdb-auto-completer>

code behind

  data: IEmployee[] = [];
  onDisplayValue(employee: IEmployee): string {
    console.log(employee)
    return employee && employee.displayName ? employee.displayName : '';
  }

Arkadiusz Idzikowski staff commented 3 years ago

@pzimmer Can you add the code of the employee interface so we can test that on our end using the exact same code?


pzimmer pro premium priority commented 3 years ago

export interface IEmployee { employeeId?: number; displayName?: string; title?: string; workPhone?: string; }


Arkadiusz Idzikowski staff commented 3 years ago

@pzimmer Thank you. We managed to find the cause of the problem. I'm afraid there is no easy workaround for now until we fix that on our end.


pzimmer pro premium priority commented 3 years ago

Thank you for working on a fix for this.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB4 11.1.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No