텍스트필드 관련 버그 해결 (#152)

텍스트필드를 클릭하여 키보드가 올라온 뒤, 시스템 백버튼을 통해 키보드를 내릴 경우, 텍스트필드에 여전히 포커스가 잡혀, 다시 텍스트필드를 클릭하여도 키보드가 올라오지 않는 문제가 존재, 키보드가 내려갔을 포커스를 직접 해제하는 Modifier 를 적용하여 해결
Nexters · Dec 28, 2023 · 854e1ba · 854e1ba
1 parent b7f2c72
commit 854e1ba
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 2 deletions.
diff --git a/core/ui/src/main/kotlin/com/nexters/bandalart/android/core/ui/extension/Modifier.kt b/core/ui/src/main/kotlin/com/nexters/bandalart/android/core/ui/extension/Modifier.kt
@@ -1,16 +1,27 @@
+@file:OptIn(ExperimentalLayoutApi::class)
+
 package com.nexters.bandalart.android.core.ui.extension
 
 import android.annotation.SuppressLint
 import androidx.compose.foundation.LocalIndication
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.isImeVisible
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
 import androidx.compose.ui.layout.LayoutModifier
 import androidx.compose.ui.layout.Measurable
 import androidx.compose.ui.layout.MeasureResult
 import androidx.compose.ui.layout.MeasureScope
+import androidx.compose.ui.focus.onFocusEvent
+import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.debugInspectorInfo
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.unit.Constraints
@@ -52,6 +63,30 @@ fun Modifier.clickableSingle(
  )
 }
 
+fun Modifier.clearFocusOnKeyboardDismiss(): Modifier = composed {
+ var isFocused by remember { mutableStateOf(false) }
+ var keyboardAppearedSinceLastFocused by remember { mutableStateOf(false) }
+ if (isFocused) {
+ val imeIsVisible = WindowInsets.isImeVisible
+ val focusManager = LocalFocusManager.current
+ LaunchedEffect(imeIsVisible) {
+ if (imeIsVisible) {
+ keyboardAppearedSinceLastFocused = true
+ } else if (keyboardAppearedSinceLastFocused) {
+ focusManager.clearFocus()
+ }
+ }
+ }
+ onFocusEvent {
+ if (isFocused != it.isFocused) {
+ isFocused = it.isFocused
+ if (isFocused) {
+ keyboardAppearedSinceLastFocused = false
+ }
+ }
+ }
+}
+
 fun Modifier.aspectRatioBasedOnOrientation(aspectRatio: Float): Modifier {
  return this.then(
  object : LayoutModifier {

diff --git a/...e/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/BandalartBottomSheet.kt b/...e/home/src/main/kotlin/com/nexters/bandalart/android/feature/home/BandalartBottomSheet.kt
@@ -82,6 +82,7 @@ import com.nexters.bandalart.android.core.ui.component.bottomsheet.BottomSheetDi
 import com.nexters.bandalart.android.core.ui.component.bottomsheet.BottomSheetSubTitleText
 import com.nexters.bandalart.android.core.ui.component.bottomsheet.BottomSheetTextStyle
 import com.nexters.bandalart.android.core.ui.component.bottomsheet.BottomSheetTopBar
+import com.nexters.bandalart.android.core.ui.extension.clearFocusOnKeyboardDismiss
 import com.nexters.bandalart.android.core.ui.extension.noRippleClickable
 import com.nexters.bandalart.android.core.ui.getNavigationBarPadding
 import com.nexters.bandalart.android.core.ui.nonScaleSp
@@ -279,7 +280,8 @@ fun BandalartBottomSheet(
  modifier = Modifier
  .fillMaxWidth()
  .height(18.dp)
- .focusRequester(focusRequester),
+ .focusRequester(focusRequester)
+ .clearFocusOnKeyboardDismiss(),
  value = uiState.cellData.title ?: "",
  onValueChange = {
  // 영어 일 때는 title 의 글자 수를 24자 까지 허용
@@ -409,7 +411,8 @@ fun BandalartBottomSheet(
  BasicTextField(
  modifier = Modifier
  .fillMaxWidth()
- .height(18.dp),
+ .height(18.dp)
+ .clearFocusOnKeyboardDismiss(),
  value = uiState.cellData.description ?: "",
  onValueChange = {
  // description 의 글자 수를 1000자 까지 허용