[Compose] Keyboard Issue in LazyColumn TextField

필자가 Compose를 사용하던 도중 만났던 문제 중 하나로,

LazyColumn 안에 TextField Component가 존재할 때 Keyboard가 정상적으로 보이지 않았던 문제가 있다.

 

처음 해당 문제를 발견했을 때는 단순히 LazyColumn에서 Focus를 잘못 잡는다던지, 아니면 Recomposable이 일어나는 과정에서 Keyboard에 들어갔던 Focus를 잃어버렸기 때문에 발생한 문제라고 파악을 했었다.

 

문제가 발생하는 경우는 아래의 영상과 같다.

 

 

 

 

결과부터,
해결책부터 말하자면, Compose에서 자체적으로 갖고 있던 문제였고 1.4.0-alpha04 버전 이후로 해결이 되었으며 해당 버전 이후의 버전으로 사용하면 위와 같은 이슈는 발생하지 않는다.

 

이번 글에서는 Compose 1.3.1 버전을 쓰고있던 필자가 해결하기 위해 진행했던 순서를 작성하고자 한다.

필자와 동일하게 낮은 버전을 사용하고 있다가 이와 같은 문제를 발견하는 사람이 있다면, 도움이 되었으면 좋겠다.

---

우선,

해당 문제를 발견하게 되면 이슈를 해결하기 위해 구글에 검색을 해보게 된다.

다양한 글들을 확인할 수 있을 것인데, google의 issuetracker의 해당 글을 보면 간단하게 해결 방법을 알 수 있다.

 

https://issuetracker.google.com/issues/179203700?pli=1

Google Issue Tracker



위의 글을 읽어보면 1.4.0-alpha04 버전부터 해결되었음을 알 수 있고 이를 적용하면 된다.

 

필자는 여기서, Compose 1.4.0 버전을 적용하는 경우와, 다양한 이유로 Compose 전체 버전을 올리지 못하는 경우에 해결하는 방법을 작성하고자 한다.

---

첫 번째로, 일괄적으로 버전을 올리는 경우이다.

 

단순하게 필자가 사용하던 1.3.1 버전을 1.4.0 버전으로 올린 후 빌드를 하면 다음과 같은 이슈가 발생한다.

 

java.lang.NoSuchMethodError: 'void org.jetbrains.kotlin.cli.common.messages.MessageCollector.report$default(org.jetbrains.kotlin.cli.common.messages.MessageCollector, org.jetbrains.kotlin.cli.common.messages.CompilerMessageSeverity, java.lang.String, org.jetbrains.kotlin.cli.common.messages.CompilerMessageSourceLocation, int, java.lang.Object)'

 

무언가 메소드를 찾을 수 없다는 로그이다.

로그를 읽어보면 jetbrains.kotlin 어쩌고에 존재하는 MessageCollector 가 없다고 한다.

패키지명만 봐도 알 수 있듯이 뭔가 코틀린 버전 때문에 어떠한 함수를 찾을 수 없다는 에러로 보인다.

 

그렇다면, Compose 버전과 Kotlin 버전의 호환에 대해 확인을 해보자.

https://developer.android.com/jetpack/androidx/releases/compose-kotlin?hl=ko

Compose와 Kotlin의 호환성 지도  |  Android 개발자  |  Android Developers

 

 

디벨로퍼 사이트에서 확인해 본 결과, Compose 1.4.0 버전은 Kotlin 1.8.0 버전과 호환된다고 한다.

 

필자는 1.7.10 버전을 사용하고 있었기 때문에 해당 이슈가 발생했던 것이므로 Project 단위의 Gradle 파일에서 Kotlin 버전을 올려주도록 한다.

 

plugins {
    ...
    id 'org.jetbrains.kotlin.android' version '1.8.0' apply false
}

 

 

이처럼 Kotlin 버전까지 올린 후, 빌드를 하면 정상적으로 동작하는 것을 확인할 수 있다.

---

하지만,

필자가 실무를 진행하면서 해당 문제를 발견했을 때는 다양한 이유로 Kotlin 버전을 쉽게 올릴 수 없었고, 그렇기 때문에 일괄적으로 Compose 1.4.0 버전으로 올려서 사용할 수 없었다.

 

따라서, Compose 버전을 일괄적으로 올리지 않고 해결하는 방법을 찾아보았다.

 

우선 가장 쓸모 없으면서 간단한 방법으로는,

TextField의 영역 아래에 Keyboard보다 큰 영역의 View가 항상 존재하도록 하면 된다.

위의 영상의 마지막을 보면 keyboard가 정상적으로 올라오는 것을 확인할 수 있다. 하지만, 그전에는 텍스트 필드를 클릭할 때마다 계속해서 영역이 키보드 위쪽으로 올라가고 텍스트 필드가 키보다 영역보다 위에 있게 됐을 때 정상적으로 동작하는 것을 볼 수 있다.

 

물론, 이 방법은 실무에서 사용할 수 없고 정상적인 해결 방법이 아니다.

그냥 이렇게 처리해 버리고 넘길까 라고 생각했던 순간이 있었지만 말이다

 

그럼 어떻게 해결해야 할까?

Compose 자체의 문제였고, 1.4.0-alpha04 버전에서 해결이 되었는데 전체 버전을 올릴 수 없는 상황이다.

그렇다면, 관련이 있는 Compose 버전만 올리면 되는 것이다.

 

위에 링크를 걸어두었던 이슈트래커의 글을 보면 다음과 같은 댓글을 확인할 수 있다.

 

The following release(s) address this bug.It is possible this bug has only been partially addressed:
androidx.compose.foundation:foundation:1.4.0-alpha04

 

전체를 올릴 필요 없이 해당 케이스만 올리면 되는 것 같다.

 

그렇다면, Project 범위의 gradle 파일에 새로운 버전을 작성해 두자.

ext {
    compose_version = '1.3.1'
    compose_next_version = '1.4.0'
}

 

그 후 foundation만 버전을 올리도록 한다.

 

implementation "androidx.compose.ui:ui:$compose_next_version"

 

 

빌드를 해보면, 역시나 이런저런 에러가 발생하면서 정상적으로 되지 않는다.

 

해당 버전을 토대로 구글링을 해보고 나온 결과를 취합하면 다음과 같은 내용을 알 수 있다.

 

implementation "androidx.compose.ui:ui:1.4.0-alpha04"
implementation "androidx.compose.foundation:foundation:1.4.0-alpha04"
implementation "androidx.compose.material3:material3:1.1.0-alpha04"

 

이 3가지만 변경하면 된다고 한다.

foundation을 사용하려면 ui 도 필요하게 되며, compose 1.4.0부터는 material3을 사용하기 때문에 해당 부분도 implementation 해줘야 한다.

 

물론, 1.4.0 버전으로 일괄적으로 올리면 marerial3는 별도로 선언하지 않아도 되지만 지금은 일부 버전만 올릴 것이기 때문에 추가를 해주어야 한다.

 

이와 같이 버전을 올린 후, 다시 빌드를 해보면 정상적으로 빌드가 되며 아래와 같은 결과를 볼 수 있다.

 

 

---

사실, 버전만 올리면 아주 간단하게 해결할 수 있는 이슈인데 필자는 실무를 진행하면서 Kotlin 버전을 올리지 못하는 이슈가 있었고,

생각보다 해당 이슈를 해결하는데 많은 시간을 투자하게 되었다.

 

아 이거 버전 못 올리는데 어쩌지..

라는 생각이 들어서 처음에 설명했던 하단에 Dummy View를 깔아서 해보려 했으나, 빌드해서 확인한 다음에 현타가 와서 다른 방법을 찾아보게 되었다.

 

다행히, 필요한 특정 버전만 올렸을 때는 kotlin 버전을 올리지 않아도 되어서 문제없이 해결을 하였지만 호환이 되지 않았다면 어쩔 수 없이 대 공사를 했어야 했다고 생각하니 소름이 돋는다.

 

필자처럼 Kotlin 버전을 올리지 못해서 낮은 버전을 사용하는 사람이 있다면,

보다 편하고 빠르게 해당 이슈를 해결했으면 좋겠다고 생각한다.

 

해당 문제는 뭐,

버전을 올린 것 외에 별도의 해결 방법은 없지만 기록을 위해 ComposeSample Project에 코드를 올려두도록 하겠다.

https://github.com/HeeGyeong/ComposeSample

GitHub - HeeGyeong/ComposeSample