How can I handle with multiple TextField focus in Jetpack Compose Pager?

Question

I have a pager. It has a TextField on each page. I'm doing the transitions with animateScrollToPage(). How can I get the TextField on each page to come with focus?

When I give Modifier.focusRequster() to the TextField and check index = pagerState.currentIndex, the TextField focused before the transition animation ends.

@Composable
fun PagerScreen(
) {
    val pagerState = rememberPagerState()
    val pageList = listOf<@Composable () -> Unit>(
        { Page1(pagerState) },
        { Page2(pagerState) },
        { Page3(pagerState) }
    )
    
    HorizontalPager(
        state = pagerState,
        userScrollEnabled = false,
        count = pageList.size
    ) { index ->
        pageList[index]()
    }
    
}

@Composable
fun Page1(pagerState: PagerState) {
    val scope = rememberCoroutineScope()
    val nextPage = pagerState.currentPage + 1
    var text by remember { mutableStateOf(TextFieldValue("")) }
    Column {
        TextField(
            value = text,
            onValueChange = { value -> text = value }
        )
        Button(
            onClick = {
                scope.launch { pagerState.animateScrollToPage(nextPage) }
            }
        ) {
            Text(text = "Next")
        }
    }
}

// other pages same as Page1

Answer 1

You can check for offset of page being zero and pagerState.currentPage being equal to index of to page being shown.

@Preview
@Composable
fun PagerScreen(
) {
    val pagerState = rememberPagerState()
    val pageList = listOf<@Composable () -> Unit>(
        { Page1(0, pagerState) },
        { Page1(1, pagerState) },
        { Page1(2, pagerState) }
    )

    HorizontalPager(
        state = pagerState,
        userScrollEnabled = false,
        count = pageList.size
    ) { index ->
        pageList[index]()
    }

}

@Composable
fun Page1(index: Int, pagerState: PagerState) {
    val scope = rememberCoroutineScope()
    val nextPage = pagerState.currentPage + 1
    val offset = pagerState.currentPageOffset
    var text by remember { mutableStateOf(TextFieldValue("")) }

    val focusRequester = remember { FocusRequester() }

    val requestFocus by remember {
        derivedStateOf {
            pagerState.currentPageOffset == 0f && index == pagerState.currentPage
        }
    }

    LaunchedEffect(key1 = requestFocus) {
        if (requestFocus) {
            focusRequester.requestFocus()
        }
    }

    Column(modifier = Modifier.fillMaxSize()) {

        Text(text = "Offset: $offset")
        TextField(
            modifier = Modifier.focusRequester(focusRequester),
            value = text,
            onValueChange = { value -> text = value }
        )
        Button(
            onClick = {
                scope.launch { pagerState.animateScrollToPage(nextPage) }
            }
        ) {
            Text(text = "Next")
        }
    }
}