MultiComboBox inside table not working as expected during deletion, selected keys are updated with the keys of deleted row in the model

[albertbolt1]

OpenUI5 version:

1.129.0

URL (minimal example if possible):

https://jsbin.com/jopifew/edit?html,js,output
(Snippix: 745391)

Steps to reproduce the problem:

1. Run the sample provided.
2. Delete the first entry in the table.
3. The selected keys of other entries in the multi combo box vanish.
4. While deleting the row, I splice the data based on the index of the row to be deleted.
5. I save the remaining data back in the model.
6. after saving, the data in the model changes ( not the data that I asked it to save).

What is the expected result?

The selection of the remaining multi combo boxes should be retained

What happens instead?

The selection is cleared because the data I ask the model to save is not the same data it saves

Any other information? (attach screenshot if possible)

The data I want the model to save.
After deleting the first row, second row should have selected keys as 4,5,6 but after saving the data, the data is changed and the selected keys are 1,2,3 which are of the row which is deleted, because of this all the keys which were previously selected are being deleted

The same thing happens with second row, the keys should be retained and not deleted according to my model.

Wanted to know why the selectedKeys are being updated from the data of the deleted row and if there is a way to prevent this from happening.

[dobrinyonkov]

Hello @albertbolt1,

I suspect this issue has something with the order UI5 updates the controls upon bindings when a row is deleted (could also be something else). This may be causing the MultiComboBox to temporarily retain the binding context of the deleted row, resulting in mismatched selectedKeys.

The team has been informed about this behavior and will investigate further. They will get back to you with updates. Internal reference: DINC0334625

While you wait, and if this is urgent, you can try the following workaround:

Clear and Reset the Model
Before updating the model, clear it to ensure all bindings are reset:

oData.items.splice(iIndex, 1);
oModel.setData({});  
oModel.setData(oData);  

Create and Bind a New JSONModel
Instead of updating the existing model, create a new instance and bind it to your view:

oData.items.splice(iIndex, 1);
var oNewModel = new JSONModel(JSON.parse(JSON.stringify(oData)));
this.getView().setModel(oNewModel);

These solutions should help retain the selectedKeys in the MultiComboBox until a permanent fix is available. Let me know if you need help implementing any of these!

Kind Regards,
Dobrin

[boghyon]

Simply changing the order of the properties resolves the issue for now:

Given:

<MultiComboBox items="{options}" selectedKeys="{selectedKeys}">

Workaround:

<MultiComboBox selectedKeys="{selectedKeys}" items="{options}">

[albertbolt1]

Thank you @boghyon