Jetpack Compose Modifier.onFocusChanged에서 animateScrollTo 가 작동안되는 문제

기존에 TextField 에서 onFocusChanged 가 될때 animateScrollTo를 하는 기능이 있었는데 

compose 버전을 1.0.5 에서 1.1.1 로 업데이트하면서

작동이 안되는 문제가 발생하였습니다.

 

해당문제에 대해서 테스트를 하다보니 animateScrollTo 가 아닌 scrollTo 를 사용하면 정상적으로 스크롤 이동이 가능하여

에니메이션 관련으로 검색중에 해당문제에 대한 힌트를 아래 이슈에서 찾을 수 있었습니다.

 

https://issuetracker.google.com/issues/212982472

Google Issue Tracker

 

해당현상은 onFocusChanged 가 호출시 Focus내부 에니메이션이 실행되면서 animateScrollTo 에 대한 에니메이션이 강제로 스킵되어 버립니다.

 

정확히는 bringIntoViewRequester.bringIntoView()가 영향을 끼친다고 하는데

내부에서 animateScrollTo를 호출하는 것으로 예상됩니다.

 

그래서 해결방법은 약간의 시간 간격을 두고 에니메이션을 재생하면 onFocusChanged 내부의 에니메이션 작동 이후에 animateScrollTo의 에니메이션도 작동되어 정상적으로 이동이 되는것을 확인 되었습니다.

 

before

......
.onFocusChanged {
    isFocusedState.value = it.isFocused
    when {
        it.isFocused -> {
            coroutineScope.launch {
                scrollState?.animateScrollTo(scrollToPosition.toInt())
            }
            onFocusIn()
        }
        else -> {
            onFocusOut()
        }
    }
}
......

 

after

......
.onFocusChanged {
    isFocusedState.value = it.isFocused
    when {
        it.isFocused -> {
            coroutineScope.launch {
                delay(10)
                scrollState?.animateScrollTo(scrollToPosition.toInt())
            }
            onFocusIn()
        }
        else -> {
            onFocusOut()
        }
    }
}
......

 

[참고링크]

https://developer.android.com/reference/kotlin/androidx/compose/foundation/ScrollState#animateScrollTo(kotlin.Int,androidx.compose.animation.core.AnimationSpec)

ScrollState  |  Android Developers

 

 

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/gestures/Scrollable.kt;drc=163e2469c85eedf0604a9a90abfebd606fee9ab2;l=540 

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/gestures/Scrollable.kt;drc=163e2469c85eedf0604a9a90abfebd606fee9ab2;l=540

 

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/Focusable.kt;drc=dc3cc99d395909550d026effa5a001d7005dccca;l=108 

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/Focusable.kt;drc=dc3cc99d395909550d026effa5a001d7005dccca;l=108

 

https://issuetracker.google.com/issues/184670295

Google Issue Tracker

 

https://intrepidgeeks.com/tutorial/jetpack-compose-110--change-summary

Jetpack Compose 1.1.0🎉 변경사항 요약

 

https://developer.android.google.cn/jetpack/androidx/releases/compose-foundation?hl=ko#1.1.0

Compose 기초  |  Android 개발자  |  Android Developers

 

https://stackoverflow.com/questions/68406508/jetpack-compose-animatescrollto-to-absolute-coordinates-or-direct-to-element

Jetpack Compose animateScrollTo to absolute coordinates or direct to element

 

https://stackoverflow.com/questions/66249829/jetpack-compose-scroll-to-focused-composable-in-column

Jetpack Compose - Scroll to focused composable in Column