Changes to ComboBox

[Christy]

We want something that is a combination between the ComboBox and the AutoComplete. Basically, we need to have a control that works exactly like the ComboBox about 99% of the time - only allowed items can be selected, we need to know the id of the selected item, an onChange event (or equivalent) must be handled, etc. However, we also have a request that users can retrieve a subset of the items based on what they type into the control. The data must also include an "Any" option that is not returned with the Input data for the parent component.

Currently, we are using the ComboBox with suggest and filterable set to true. We are adding the "Any" in ngOnInit and ngOnChanges as needed by calling the following:

resetItemData() {
  this.allItems = [this.anyItem, ...this.myComponent.items];
  this.filteredItems = this.allItems;
}

The ComboBox uses filteredItems as its data and we are setting the initial value to be anyItem which has an id = 0. We are using the valuePrimitive because we need to run another event when any inputs change on the form, so we need to run the valueChange event on the ComboBox. We are also using the filterChange to filter the items shown based on what the user types in.

When the user types in something that does not match, we are setting the filteredItems to return allItems just as we do at the beginning so that the user can just select something from the list. If the user selects nothing, we set the value to be 0 so that the request will use "Any" because the API will not accept an invalid itemId. 

Everything is working as designed. However, we have a couple UI issues that need to be addressed before we can proceed. 

1. If the user types in something invalid and switches focus, the text is removed, but "Any" is not shown - even though the value is reset to 0. Is there a defaultValue or some way to programmitically insert text into the ComboBox input?
2. When the user is typing in text, the popup with the suggestions blocks the bottom 50% of the text in the input. Is there a way to push this popup lower? I looked at the CSS rendered for the popup, but it appears to be calculated based on the position that the ComboBox is in the browser window. I tried adding something to the popupSettings parameter, but it did not seem to recognize my changes. This is slightly annoying when the filteredItems have some items, but it is really a deal-breaker when the user types in something that has no matches because a big empty window blocks the text.

Any suggestions you could give on this would be helpful! I have tried using AutoComplete, but it appears that there are even more issues to address. However, if you know of a way to use that instead of the ComboBox, I am open to that as well.

Thank you for your help!

[Dimiter Topalov]

Hello Christy,

Due to the specifics of the Angular change detection mechanisms, you will need to make sure that the field the ComboBox's value property is bound to is changed in the next "tick" so that the change is detected appropriately. A sample approach would be to handle the valueChange event and if the incoming value is undefined (when the search does not match any valid items and the component is blurred) change the value to 0, e.g.:

https://plnkr.co/edit/Aaws33a4dErHGombOugZ?p=preview

This way the value of the component will be 0 and the respective text ("Any") will be picked from the options list.

As for the popup positioning issue, I could not observe it on my end. Typically the popup will be displayed below the input if there is enough space available, and above the input (but not covering it) when there is not, e.g.:



https://plnkr.co/edit/aTiNUG3ZF4lSTvfChqxM?p=preview

Can you please send us a similar isolated runnable project where the described issue can be observed, so we can inspect it further and determine what might be causing it? Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Christy]

This works, but it doesn't include the filtering. I think removing the Any option while filtering might be the problem.

[Dimiter Topalov]

Hi Christy,

You are absolutely correct, when custom values are not allowed, the value of the component needs to be present in the list of options so that the text and value fields can be matched accordingly. Please accept my apologies for this oversight in my initial response.

The most straight-forward approach for keeping the desired functionality is to modify the filtering expression executed in the filterChange event handler to always include the "Any" item in the filtered data set, e.g.:

https://plnkr.co/edit/JrJzXboDqLbcCl66XQcN?p=preview

Let me know whether this approach matches your requirements.

Regards,
Dimiter Topalov
Progress Telerik

[Christy]

Thanks! That is perfect. A bit of the other formatting I had to do was causing some of the overlap.