IssueTracker

Jetpack Compose version: 1.7.0

Jetpack Compose component(s) used: androidx.compose.foundation:foundation-layout

Android Studio Build: N/A

Kotlin version: N/A

Steps to Reproduce or Code Sample to Reproduce:

1. Follow the example code here to create a ContextualFlowRow
2. Add a bunch of chips
3. Click +N to expand the row

Actual behavior: Sometimes the "Show less" chip is partially rendered in the last row. Expected behavior: The "Show less" chip should be rendered on a new row if there's not enough space in the last row.

After digging into the code, this looks like the root cause.

IIUC:

• ContextualFlowRowOverflow pre-generates the measurables for the expand and collapse indicators.
• However, the pre-generated measurable for the collapse indicator uses 0 as numberOfItemsShown.
• Since we followed the example code and used a single composable for both expand and collapse indicator, the collapse indicator is actually pre-measured as "+0" instead of "Show less" (I'm giving the strings for example), and the measurable has smaller dimension than it should.
• When ContextualFlowRow determines whether the collapse indicator can be placed in the last row, it's using the wrong dimension (width of "+0"), so it may think the chip can be fully rendered in the last row, and place the chip there.
• The collapse indicator has to follow the constraints passed from the parent during the measurement phase, so it ellipsizes/clips the text.

Two solutions I can think of:

1. Use the correct number of items when pre-generating the measurable for the collapse indicator.
2. Update public documentation and say the expand and collapse indicator should not be shared, and the collapse indicator should use constant text.