app: Optimize TextField focus

YuKongA · Jan 11, 2025 · 9008f6a · 9008f6a
1 parent 84d9aa8
commit 9008f6a
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 28 deletions.
diff --git a/composeApp/src/commonMain/kotlin/App.kt b/composeApp/src/commonMain/kotlin/App.kt
@@ -1,3 +1,4 @@
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
@@ -21,6 +22,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.util.lerp
 import data.DataHelper
@@ -80,6 +82,8 @@ fun App() {
 
         val scrollBehavior = MiuixScrollBehavior(rememberTopAppBarState())
 
+        val focusManager = LocalFocusManager.current
+
         val hazeState = remember { HazeState() }
 
         val hazeStyle = HazeStyle(
@@ -96,7 +100,11 @@ fun App() {
             Scaffold(
                 modifier = Modifier
                     .imePadding()
-                    .fillMaxSize(),
+                    .fillMaxSize()
+                    .clickable(
+                        indication = null,
+                        interactionSource = null,
+                    ) { focusManager.clearFocus() },
                 topBar = {
                     TopAppBar(
                         color = Color.Transparent,

diff --git a/composeApp/src/commonMain/kotlin/ui/InfoCardViews.kt b/composeApp/src/commonMain/kotlin/ui/InfoCardViews.kt
@@ -15,8 +15,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.ContentCopy
 import androidx.compose.material.icons.rounded.Download
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.mutableStateOf
@@ -37,6 +35,8 @@ import misc.bodyFontSize
 import misc.bodySmallFontSize
 import org.jetbrains.compose.resources.stringResource
 import top.yukonga.miuix.kmp.basic.Card
+import top.yukonga.miuix.kmp.basic.Icon
+import top.yukonga.miuix.kmp.basic.IconButton
 import top.yukonga.miuix.kmp.basic.Text
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 import ui.components.TextWithIcon

diff --git a/composeApp/src/commonMain/kotlin/ui/TextFieldViews.kt b/composeApp/src/commonMain/kotlin/ui/TextFieldViews.kt
@@ -110,11 +110,12 @@ fun TextFieldViews(
                 items = DeviceInfoHelper.androidVersions,
                 selectedIndex = androidVersionSelected.value,
                 onSelectedIndexChange = { index ->
+                    focusManager.clearFocus()
                     androidVersionSelected.value = index
                     androidVersion.value = DeviceInfoHelper.androidVersions[index]
                 },
                 mode = DropDownMode.AlwaysOnRight,
-                maxHeight = 300.dp
+                maxHeight = 280.dp
             )
             SuperDropdown(
                 title = stringResource(Res.string.regions_code),
@@ -125,7 +126,7 @@ fun TextFieldViews(
                     deviceRegion.value = DeviceInfoHelper.regionNames[index]
                 },
                 mode = DropDownMode.AlwaysOnRight,
-                maxHeight = 300.dp
+                maxHeight = 280.dp
             )
         }
         TextField(
@@ -167,6 +168,7 @@ fun TextFieldViews(
                     mode = SpinnerMode.AlwaysOnRight,
                     showValue = false,
                     onSelectedIndexChange = { index ->
+                        focusManager.clearFocus()
                         val parts = searchKeywords.value[index].split("-")
                         deviceName.value = parts[0]
                         codeName.value = parts[1]
@@ -177,7 +179,7 @@ fun TextFieldViews(
                         regionSelected.value = DeviceInfoHelper.regionNames.indexOf(parts[2])
                         androidVersionSelected.value = DeviceInfoHelper.androidVersions.indexOf(parts[3])
                     },
-                    maxHeight = 300.dp
+                    maxHeight = 280.dp
                 )
             }
         }
@@ -191,6 +193,7 @@ fun TextFieldViews(
                 .padding(horizontal = 12.dp),
             colors = ButtonDefaults.textButtonColorsPrimary(),
             onClick = {
+                focusManager.clearFocus()
                 if (codeName.value != "" && androidVersion.value != "" && systemVersion.value != "") {
                     updateRomInfo.value++
                 } else {

diff --git a/composeApp/src/commonMain/kotlin/ui/components/AutoCompleteTextField.kt b/composeApp/src/commonMain/kotlin/ui/components/AutoCompleteTextField.kt
@@ -1,17 +1,17 @@
 package ui.components
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.ExposedDropdownMenuBox
-import androidx.compose.material3.MenuAnchorType.Companion.PrimaryEditable
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType.Companion.LongPress
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.text.input.ImeAction
@@ -24,7 +24,6 @@ import top.yukonga.miuix.kmp.extra.DropdownImpl
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 import ui.components.SuperPopupUtil.Companion.dismissOwnPopup
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun AutoCompleteTextField(
     text: MutableState<String>,
@@ -40,21 +39,15 @@ fun AutoCompleteTextField(
                 || it.replace(" ", "").contains(text.value, ignoreCase = true)
     }.sortedBy { !it.startsWith(text.value, ignoreCase = true) }
 
-    LocalHapticFeedback.current
+    val hapticFeedback = LocalHapticFeedback.current
     val focusManager = LocalFocusManager.current
 
-    ExposedDropdownMenuBox(
+    Box(
         modifier = Modifier
             .padding(horizontal = 12.dp)
             .padding(bottom = 12.dp)
-            .fillMaxWidth(),
-        expanded = showTopPopup.value,
-        onExpandedChange = {
-            showTopPopup.value = text.value.isNotEmpty()
-        }
+            .fillMaxWidth()
     ) {
-        println("list.isNotEmpty(): ${list.isNotEmpty()}, list: $list")
-
         TextField(
             insideMargin = DpSize(16.dp, 20.dp),
             value = text.value,
@@ -66,17 +59,23 @@ fun AutoCompleteTextField(
             singleLine = true,
             label = label,
             backgroundColor = MiuixTheme.colorScheme.surface,
-            modifier = Modifier.menuAnchor(type = PrimaryEditable, enabled = true),
             keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
             keyboardActions = KeyboardActions(onDone = {
                 focusManager.clearFocus()
                 dismissOwnPopup(showTopPopup)
-            })
+            }),
+            modifier = Modifier
+                .onFocusChanged { focusState ->
+                    if (focusState.isFocused) {
+                        showTopPopup.value = text.value.isNotEmpty() && list.isNotEmpty()
+                    }
+                }
         )
         SuperPopup(
             show = showTopPopup,
             onDismissRequest = {
                 showTopPopup.value = false
+                focusManager.clearFocus()
             },
             maxHeight = 300.dp
         ) {
@@ -97,6 +96,7 @@ fun AutoCompleteTextField(
                             text = text,
                             optionSize = list.size,
                             onSelectedIndexChange = {
+                                hapticFeedback.performHapticFeedback(LongPress)
                                 onValueChange.value = text
                                 KeyboardOptions(imeAction = ImeAction.Done)
                                 focusManager.clearFocus()
@@ -111,4 +111,4 @@ fun AutoCompleteTextField(
             }
         }
     }
-}
+}
diff --git a/composeApp/src/commonMain/kotlin/ui/components/SuperPopupHost.kt b/composeApp/src/commonMain/kotlin/ui/components/SuperPopupHost.kt
@@ -6,23 +6,17 @@ import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.scaleIn
 import androidx.compose.animation.scaleOut
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.TransformOrigin
 import androidx.compose.ui.graphics.TransformOrigin.Companion
 import androidx.compose.ui.zIndex
 import top.yukonga.miuix.kmp.anim.DecelerateEasing
 import top.yukonga.miuix.kmp.basic.Scaffold
-import top.yukonga.miuix.kmp.theme.MiuixTheme
 
 /**
  * A util class for show popup and dialog.