IssueTracker

Jetpack Compose version: BOM 2024.09.02

Jetpack Compose component(s) used: verticalScroll, focusable

Kotlin version: 1.9.24

When a vertical scroll container shrinks while a descendant is focused, the scroll container is scrolled to keep the focused child in view. This mostly works. However, if the viewport shrinks once and then after scrolling is settled it shrinks again, the focused descendant is not scrolled into view the second time.

Here's a unit test that demonstrates both the "simple" case that works, and the double-shrink case that is broken.

class FocusableInViewportDoubleShrinkTest {

  @get:Rule val rule = createComposeRule()

  private val tag = "tag"
  private val fieldHeight = 50.dp
  private val viewportInitialHeight = 200.dp
  private val beforeAndAfterSpace = 300.dp

  @Test fun singleShrinkWorks() {
    val scrollState = ScrollState(0)
    var viewportHeight by mutableStateOf(viewportInitialHeight)

    rule.setContent {
      Column(
        modifier = Modifier
          .fillMaxWidth()
          .height(viewportInitialHeight)
          .verticalScroll(scrollState),
      ) {
        Space()
        FakeField(Modifier.testTag(tag))
        Space()
      }
    }

    rule.onNodeWithTag(tag).assertIsNotDisplayed()
    rule.onNodeWithTag(tag).requestFocus()
    rule.onNodeWithTag(tag).assertIsFullyDisplayed()

    // Simulate the keyboard appearing and shrinking the viewport.
    // This is often animated on real devices, but our bug reproduces without animation.
    viewportHeight -= fieldHeight

    rule.onNodeWithTag(tag).assertIsFullyDisplayed()
  }

  @Test fun doubleShrinkIsBroken() {
    val scrollState = ScrollState(0)
    var viewportHeight by mutableStateOf(viewportInitialHeight)

    rule.setContent {
      Column(
        modifier = Modifier
          .fillMaxWidth()
          .height(viewportHeight)
          .verticalScroll(scrollState),
      ) {
        Space()
        FakeField(Modifier.testTag(tag))
        Space()
      }
    }

    rule.onNodeWithTag(tag).assertIsNotDisplayed()
    rule.onNodeWithTag(tag).requestFocus()

    // Simulate keyboard appearing and shrinking the viewport.
    // Note that it doesn't seem to matter how much we shrink the viewport size by, neither here nor
    // the second time, it fails consistently.
    viewportHeight -= fieldHeight

    // This is the same assertion as the test above, but we check again here since we want to make sure
    // compose is settled anyway.
    rule.onNodeWithTag(tag).assertIsFullyDisplayed()

    // Simulate keyboard's suggestion row appearing.
    // Use delta <fieldHeight to make the test failure more visually apparent.
    viewportHeight -= fieldHeight / 2

    rule.onNodeWithTag(tag).assertIsNotFullyDisplayed()
  }

  /**
   * Focusable rectangle, just like a text field. Don't use an actual text field to avoid dealing with
   * the keyboard since we don't need actual input.
   */
  @Composable private fun FakeField(modifier: Modifier = Modifier) {
    val interactionSource = remember { MutableInteractionSource() }
    val isFocused by interactionSource.collectIsFocusedAsState()
    Box(
      modifier
        .fillMaxWidth()
        .height(fieldHeight)
        .then(if (isFocused) Modifier.border(3.dp, Color.Blue) else Modifier)
        .background(Color.Green)
        .focusable(interactionSource = interactionSource)
    )
  }

  @Composable private fun Space() {
    Spacer(
      Modifier
        .background(Color.Red)
        .fillMaxWidth()
        .height(beforeAndAfterSpace)
    )
  }

  private fun SemanticsNodeInteraction.assertIsFullyDisplayed() {
    // Checks a bunch of view conditions too.
    assertIsDisplayed()
    val node = fetchSemanticsNode()
    assertThat(node.boundsInWindow.size).isEqualTo(node.size.toSize())
  }

  private fun SemanticsNodeInteraction.assertIsNotFullyDisplayed() {
    val node = fetchSemanticsNode()
    assertThat(node.boundsInWindow.size.height).isLessThan(node.size.height.toFloat())
  }
}

Workaround

Weirdly, this bug can be worked around by explicitly doing something very similar to what Compose is already doing internally:

@OptIn(ExperimentalFoundationApi::class)
@Composable
public fun Modifier.focusableInViewportDoubleShrinkWorkaround(
  scrollState: ScrollState,
): Modifier {
  var focusCoordinates: LayoutCoordinates? by remember { mutableStateOf(null) }
  var coordinates: LayoutCoordinates? by remember { mutableStateOf(null) }
  val scope = rememberCoroutineScope()

  return this
    .onFocusedBoundsChanged { bounds ->
      focusCoordinates = bounds
    }
    .onPlaced { tempCoordinates ->
      coordinates = tempCoordinates
    }
    .onSizeChanged { size ->
      val rect = focusCoordinates?.let { coordinates?.localBoundingBoxOf(it, clipBounds = false) }
      if (rect != null) {
        val distanceFromBottom = rect.bottom - coordinates!!.size.height
        if (distanceFromBottom > 0) {
          scope.launch {
            scrollState.scrollBy(distanceFromBottom)
          }
        }
      }
    }
}

Adding this test to the above test suite proves it:

  @Test fun workaroundWorks() {
    val scrollState = ScrollState(0)
    var viewportHeight by mutableStateOf(viewportInitialHeight)

    rule.setContent {
      Column(
        modifier = Modifier
          .fillMaxWidth()
          .height(viewportHeight)
          .focusableInViewportDoubleShrinkWorkaround(scrollState)
          .verticalScroll(scrollState),
      ) {
        Space()
        FakeField(Modifier.testTag(tag))
        Space()
      }
    }

    rule.onNodeWithTag(tag).assertIsNotDisplayed()
    rule.onNodeWithTag(tag).requestFocus()

    // Simulate keyboard appearing and shrinking the viewport.
    // Note that it doesn't seem to matter how much we shrink the viewport size by, neither here nor
    // the second time, it fails consistently.
    viewportHeight -= fieldHeight

    // This is the same assertion as the test above, but we check again here since we want to make sure
    // compose is settled anyway.
    rule.onNodeWithTag(tag).assertIsFullyDisplayed()

    // Simulate keyboard's suggestion row appearing.
    // Use delta <fieldHeight to make the test failure more visually apparent.
    viewportHeight -= fieldHeight / 2

    rule.onNodeWithTag(tag).assertIsFullyDisplayed()
  }