I am having trouble using igx-combo and I'll try to explain the scenario.
I have a combo component (combo B) where its data is variable and will change depending on what a user has selected in another combo component (combo A). For example, lets say there is a selection component containing genres such as fruits or vegetables (combo A). Upon selecting one of those options, the second combo component will display a list with that genre of items (combo B). If a user selects fruits in combo A, apples, oranges, bananas, etc. will show in combo B.
Here is the bug that I am running into:
A user selects fruits in combo A to dictate the data that they will be able to select in combo B and closes the combo.
A user then opens the combo B dropdown and scrolls down in the list to select a fruit and closes the combo.
A user changes their mind and selects vegetables in combo A. This will change the data being displayed in combo B.
When a user tries to open and select something in combo B, the combo dropdown does not display the correct data and has blanks in the dropdown. The scroll bar is also gone.
I think what is happening is if the two genres of data have a varied length, such as 50 fruits and 100 vegetables in the list, and the user scrolls down to anywhere past the 50th item mark in vegetables, if they switch back to fruits, the scroll bar becomes past the max item length and breaks.
Is there any fix for this?
Hello,
I have been looking into your question and prepared a small sample based on the provided details. On my side, everything seems to work as expected and I'm able to successfully change and display the correct data.
In order to change the data in the second combo based on the selected item in the first one, I'm handling the onSelectionChange event.
public changeComboSelection(event) { this.comboB.deselectAllItems(); this.dataB = []; if (event.added && event.added.length > 0) { event.newSelection = [event.added[0]]; if (event.added[0] === "fruits") { this.dataB = this.fruits; } if (event.added[0] === "vegetables") { this.dataB = this.vegetables; } } else { event.newSelection = []; } }
Here could be found my sample for your reference. Please test it on your side and let me know if I may be of any further assistance.
Sincerely,Teodosia HristodorovaAssociate Software Developer
Thank you for your response and resolving the issue. I did not deselectAllItems before assigning dataB to be a new set of data. I think that was causing the issue.
I am glad that you find my suggestion helpful.
Thank you for using Infragistics components.
Regards,Teodosia HristodorovaAssociate Software Developer
I am having the same issue happen again. Here is a snippet of my code to recreate this issue. It is slightly different from my original steps to recreate. The difference is, DataB starts off by having both fruits and vegetables data. Upon a selection in ComboA, the DataB will be filtered to only contain that genre of data. This means if both fruits and vegetables are selected in ComboA, then DataB will contain the entire list of data. Eg. 1. dataB has both fruits and vegetables data
2. user selects fruits in comboA
3. dataB is filtered to only display fruits data
4. user clicks on fruits in comboB after scrolling down in the list
5. user clears comboA and selects vegetables
6. user opens comboB dropdown and the combo is not displaying correct data with no scroll bar this.dataB = [ Fruits, Vegetables, .... ] // this.dataB.length > 50 ; the data I'm using has 4 vegetables and 50+ fruits
this.dataBCopy = [...this.dataB]
public changeComboSelection(event) { if (event.newSelection.length > 0)
this.comboB.deselectAllItems();
I have been looking into your question and modified the previously attached sample based on the provided details. I defined an array that contains both fruits and vegetables. Each time when the comboA selection is changes and the onSelection event is fired I'm clearing the comboB selection and set its data to an empty array.In case there is a newSelection of comboB, I'm calling the filterData method with this collection. In the method besed on the newSelection, I'm setting the data of comboB to the required items:
public changeComboSelection(event) { this.comboB.deselectAllItems(); this.dataB = []; if (event.newSelection && event.newSelection.length > 0) { this.filterData(event.newSelection); } } private filterData(selection: any[]) { if (selection.length == 2) { this.dataB = this.fruitsAndVegetables; } else if (selection[0] === "fruits") { this.dataB = this.fruitsAndVegetables.slice(0, 4); } else if (selection[0] === "vegetables") { this.dataB = this.fruitsAndVegetables.slice(5); } }
Of course instead of slice if this is not suitable for your scenario, you could get the required items using some different approach depending on your data structure.