MultiComboxBox within a table closes after selection

I have tried to resolve the problem for quite sometime but have not been successful.

Inside a table, I have a sap.m.MultiComBox. The drop down in the multicombobox closes after selecting the first value. If not inside the table, the multicombobox works fine as expected (popover does not close). One additional behavior I observed is that if I don't have the selectedKeys bound, then it works fine.

Any reasons or suggestions?

<Table
  growing="true"
  items="{employee>/EmployeeCollection}">
  <columns>
    <Column width="10%" />
    <Column width="55%" />
    <Column width="35%"/>
  </columns>
  <ColumnListItem>
    <Image id="image" src="{employee>dataURI}" class="sapOB_Assign_Usercircle" />
    <Text text="{employee>Name}" class="tableText" />
    <VBox>
      <MultiComboBox id="mcb1"
        selectedKeys="{employee>roles}"
        items="{
          path: 'roles>/BusinessRoles',
          templateShareable: false
        }">
        <core:Item key="{roles>id}" text="{roles>name}" />
      </MultiComboBox>
      <HBox />
    </VBox>
  </ColumnListItem>
</Table>

Solution

You must be using UI5 version 1.66 or below with growing="true" on the Table. In that case, the dropdown closes immediately after the selection due to a focus loss caused by rerendering of the list item (Its DOM element being rewritten completely). The rerendering itself is caused by two-way bound selectedKeys which explains why it "works" if the property is not bound.

Normally, two-way binding should not be used together with growing. According to the API reference:

Note: Growing must not be used together with two-way binding.

But it's still unclear whether the above constraint is still valid today (See issue #3013).

In order to keep two-way binding with growing="true", add the attribute key* to the list binding info:

<Table
  growing="true"
  items="{
    path: 'employee>/EmployeeCollection',
    key: 'employeeId'
  }"
>

Here is a working example: https://jsbin.com/ciyosir/edit?js,output. As you can see, the dropdown is kept open even after selection because the list item is not rerendered thanks to the extended change detection.

Additionally, I'd suggest to upgrade to the latest stable UI5 version in order to benefit from many controls having migrated to the new semantic rendering.

^{* The key awaits a property name from the model of which the value is unique. For more information, see topic Extended Change Detection.}