rerendering Objects when using grow not working correctly

SAPUI5 version: 1.102.4

Browser/version (+device/version):

Firefox 102.4esr Google Chrome 107.0.5304.107 Both on Windows 10 Enterprise 21H2 19044.2130

Issue

I have a wizard which loads data from a backend. Hence I’m using grow in my <Table>. The functionality of the ComboBox and Input is the following: The ComboBox shows a list of options. If nothing suits the user, there is an option to select “other”. When the user selects the option “other”, the input becomes visible. In this Input is a validation that the minimum charcaters is 5 to get a useful answer. If the character count is below 5 we are setting the ValueState to an Error (sap.ui.core.ValueState.Error) and setting the ValueStateText accordingly. This all works. It stops working when deselecting the Input or doing something other in the table. Then the red border dissappears. After some testing I found out, that as soon as you change anything in the table (like a ComboBox or something else), the whole table rerenders and creates new html-elements. The content is the same but the id changes (__input1-__cloneXXX-inner where XXX is any number). The problem with this is that I’m using the oEvent to change the ValueState (see Controller section). In this oEvent is of course the old id saved so I can’t control the ValueState of the newly created element through this method. Probably this is not copied when cloning the whole tree. I’m open for solutions or (preferably) a fix for the oEvent method. Below is the code for the issue. Thanks in advance!

Fragment (reduced to key elements):

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
	<Table growing="true" growingThreshold="20"
		growingScrollToLoad="true" items="{path: 'container>/Containers', sorter: {path: 'something/irrelevant'}}"
		contextualWidth="Auto">
		<columns>
			<!-- irrelevant -->
		</columns>
		<items>
			<ColumnListItem>
				<cells>
					<!-- irrelevant items-->
					<VBox>
						<ComboBox something="irrelevant" items="{ path: 'ListOf>possibleItems'}">
						</ComboBox>
						<Input visible="{container>NoteVisible}" value="{container>Note}" liveChange="onChangeNote"/>
					</VBox>
				</cells>
			</ColumnListItem>
		</items>
	</Table>
</core:FragmentDefinition>

Controller

if (sNote.length >= 5 && sNote.length <= 200 && sNote !== null) {
				oEvent.getSource().setValueState(sap.ui.core.ValueState.None);
				oEvent.getSource().setValueStateText("");
			} else {
				oEvent.getSource().setValueState(sap.ui.core.ValueState.Error);
				oEvent.getSource().setValueStateText("Some Error text");
			}

[boghyon]

This is basically the same issue as https://github.com/SAP/openui5/issues/1757. See https://github.com/SAP/openui5/issues/1736#issuecomment-338991820. Accordingly, adding key: 'Category' to the table’s items aggregation binding would fix the issue in your case.

Because the container model is not of type ODataModel, you have to provide a key property name.

For more information about the key in aggregation binding, see the section “Using Extended Change Detection in App Development” in https://sdk.openui5.org/topic/7cdff73f308b4b10bdf7d83b7aba72e7

---

PS: note that the API reference of sap.m.ListBase as well as the documentation topic “Growing Feature for Table and List” still states that growing must not be enabled together with two-way binding. But according to https://github.com/SAP/openui5/issues/3013, it’s not accurate and must be updated.

[thunermay]

Here is the Plunker of the MCVE https://plnkr.co/edit/k6g0QTfrl1mZq33b. Hope this helps. Thanks in advance!