Not able to get combobox search-term that is not matching to the given options

Is this a bug, enhancement, or feature request?

enhancement

Briefly describe your proposal.

Hi Fundamental Team,

we have an issue with the combobox “fd-combobox”, because it gives us just the valid values back. In our case, we are using the combobox for searching & selecting items. There could be thousands of items, therefore we are just loading the top 20 items and give them to the combobox. In case that the user is entering some characters, then we would use these characters to request the top 20 items that are matching with these characters. This is not working now, because the combobox is just giving a value (to the change listener) that matches to the initial top 20 items.

<fd-combobox [communicateByObject]="true" formControlName="items.control.name" [dropdownValues]="(dropdownItems$ | async)" [placeholder]="" [filterFn]="dropdownFilterFn"></fd-combobox>

In the above html you can see that we are binding the element with the formControlName. We are also using the filterFn, because the items are objects and no string values.

formGroup.controls['items.control.name'].valueChanges.pipe(
     map((inputValue) => {
          // If inputValue don't match with an item, then we do a request of the top 20 items that contains the characters on the inputValue.
     })
).subscribe()

In the code you can see how we listen to the changes. We are using the valueChanges observer of the form-control. This will be triggered in case if the user is entering some character or if the user is selecting an item. In the first case, the inputValue will be undefined, even if there are characters in the combobox-field. This is our problem here. We also checked the control object inside the map(…), but nothing helpful there. The combobox is just giving a non-undefined inputValue if it is matching to the dropdown options.

What we also tried was the [(ngModel)] to bind the InputValue as described in the combobox doc, but unfortunately, Angular is not letting you using formControlName and ngModel in the same time if you have Angular 7+. You will get log-message with the description in the console.

There is also the searchFunction API from the combobox, but it will just be triggered if the user presses the Enter key. Additionally, it doesn’t include the searchTerm as parameter.

It would be at best for us, if we can handle the value in the valueChanges API where we also handle the rest of the businessLogic. Here we just need to get access to the inputValue, which is not matching to the dropdown options.

Which versions of Angular and Fundamental NGX are affected? (If this is a feature request, use current version.)

“@angular/core”: “^8.2.7”, “@fundamental-ngx/core”: “^0.13.1”, “fundamental-styles”: “^0.4.1”,

[zaheral]

Hi @JKMarkowski , thank you very much for these options. The second option worked for me. Best Regards, Zaher

[droshev]

@JKMarkowski @rengare can you take a look?