Jetpack Compose中ExposedDropdownMenu实现自动完成TextField的键盘异常问题

我正在尝试用Jetpack Compose的ExposedDropdownMenu实现自动完成TextField功能（期待Compose后续能像XML一样提供内置自动完成组件），但遇到了物理键盘输入异常的问题：

情况一：物理键盘完全无法输入，仅软键盘可用 #

使用以下代码时，物理键盘无法在TextField中输入内容，仅模拟器软键盘正常：

val allLocations = listOf("FLSC") // just a hardcoded test list of a single value for now
val dropDownOptions = remember { mutableStateOf(listOf<String>()) }
val dropDownExpanded = remember { mutableStateOf(false) }

ExposedDropdownMenuBox(
            modifier = modifier,
            expanded = dropDownExpanded.value,
            onExpandedChange = {
                dropDownExpanded.value = !dropDownExpanded.value
            }) {
            TextField(
                modifier = Modifier
                    .menuAnchor()
                    .fillMaxWidth()
                    .onFocusChanged { focusState ->
                        if (!focusState.isFocused)
                            dropDownExpanded.value = false
                    },
                value = viewModel.location.value.text, // stored in State in viewmodel
                label = {
                    Text(
                        text = stringResource(id = R.string.location),
                        style = TextStyle(
                            color = ShotTrackerColors.textFieldTextColor,
                            fontSize = MaterialTheme.typography.subtitle1.fontSize
                        )
                    )
                },
                onValueChange = { enteredText ->
                    viewModel.onEvent(AddEditShotsEvent.EnteredLocation(enteredText))
                    
                    dropDownOptions.value =
                        allLocations.filter { it.contains(viewModel.location.value.text, ignoreCase = true) && it.lowercase() != viewModel.location.value.text.lowercase() }
                            .take(3)
                    
                    dropDownExpanded.value = dropDownOptions.value.isNotEmpty()
                }
            )
            ExposedDropdownMenu(
                expanded = dropDownExpanded.value,
                onDismissRequest = {
                    dropDownExpanded.value = false
                },
            ) {
                dropDownOptions.value.forEach { text ->
                    DropdownMenuItem(
                        text = {
                            Text(text = text)
                        },
                        onClick = {
                            viewModel.onEvent(AddEditShotsEvent.EnteredLocation(text))
                        
                            dropDownExpanded.value = false
                        }
                    )
                }
            }
        }

情况二：输入触发下拉选项时仅能输入单个字符 #

参考Stack Overflow代码实现后，仅当输入字符不触发ExposedDropdownMenu显示时，物理键盘可正常输入；若输入包含在下拉选项中的字符（如示例中的'f'），则仅能输入单个字符：

val allLocations = listOf("FLSC") // hardcoded test list
val dropDownExpanded = remember { mutableStateOf(false) }
// no "dropDownOptions" here as that's basically below as the "filterOpts" var

ExposedDropdownMenuBox(
            expanded = dropDownExpanded.value,
            onExpandedChange = {
                dropDownExpanded.value = !dropDownExpanded.value
            }
        ) {
            TextField(
                modifier = Modifier
                    .menuAnchor()
                    .fillMaxWidth(),
                value = viewModel.location.value.text,
                onValueChange = {
                    viewModel.onEvent(AddEditShotsEvent.EnteredLocation(it))
                },
                label = {
                    Text(stringResource(id = R.string.location))
                }
            )
            // filter options based on text field value (i.e. crude autocomplete)
            val filterOpts = if (viewModel.location.value.text.isNotBlank()) {
                allLocations.filter {
                    it.contains(viewModel.location.value.text, ignoreCase = true)
                }
            }
            else {
                emptyList()
            }

            if (filterOpts.isNotEmpty()) {
                ExposedDropdownMenu(
                    expanded = dropDownExpanded.value,
                    onDismissRequest = {
                        dropDownExpanded.value = false
                    }
                ) {
                    filterOpts.forEach { option ->
                        DropdownMenuItem(
                            text = { Text(text = option) },
                            onClick = {
                                viewModel.onEvent(AddEditShotsEvent.EnteredLocation(option))

                                dropDownExpanded.value = false
                            }
                        )
                    }
                }
            }
        }

异常原因 #

1. 情况一核心问题：

   • onValueChange中直接修改dropDownExpanded状态，触发频繁重组导致TextField失去物理键盘焦点，无法继续输入。
   • onFocusChanged逻辑过于激进：只要失去焦点就关闭下拉，物理键盘输入时重组引发的短暂焦点丢失会直接干扰输入流程。

2. 情况二核心问题：

   • 下拉菜单expanded状态未与输入内容联动，仅依赖手动切换，输入匹配选项时下拉弹出但未维持TextField焦点，物理键盘输入事件被拦截。
   • 通过if判断动态创建/销毁下拉菜单，每次输入触发的重组会干扰TextField的输入状态，导致仅能输入单个字符。

修复方案 #

以下是优化后的代码，解决物理键盘输入问题并实现稳定的自动完成功能：

val allLocations = listOf("FLSC")
val dropDownExpanded = remember { mutableStateOf(false) }

ExposedDropdownMenuBox(
    expanded = dropDownExpanded.value,
    onExpandedChange = { dropDownExpanded.value = it }
) {
    TextField(
        modifier = Modifier
            .menuAnchor()
            .fillMaxWidth(),
        value = viewModel.location.value.text,
        onValueChange = { enteredText ->
            viewModel.onEvent(AddEditShotsEvent.EnteredLocation(enteredText))
            
            // 用实时输入文本过滤选项，避免ViewModel状态更新延迟
            val matchedOptions = allLocations.filter {
                it.contains(enteredText, ignoreCase = true) && it.lowercase() != enteredText.lowercase()
            }.take(3)
            
            // 仅在必要时切换下拉状态，减少重组次数
            if (matchedOptions.isNotEmpty() && !dropDownExpanded.value) {
                dropDownExpanded.value = true
            } else if (matchedOptions.isEmpty() && dropDownExpanded.value) {
                dropDownExpanded.value = false
            }
        },
        label = {
            Text(
                text = stringResource(id = R.string.location),
                style = TextStyle(
                    color = ShotTrackerColors.textFieldTextColor,
                    fontSize = MaterialTheme.typography.subtitle1.fontSize
                )
            )
        },
        // 添加官方下拉触发图标，提供手动交互入口
        trailingIcon = {
            ExposedDropdownMenuDefaults.TrailingIcon(expanded = dropDownExpanded.value)
        }
    )

    // 始终渲染下拉菜单，仅通过expanded控制显示，避免动态创建销毁干扰焦点
    ExposedDropdownMenu(
        expanded = dropDownExpanded.value,
        onDismissRequest = { dropDownExpanded.value = false }
    ) {
        val matchedOptions = allLocations.filter {
            it.contains(viewModel.location.value.text, ignoreCase = true) && it.lowercase() != viewModel.location.value.text.lowercase()
        }.take(3)
        
        matchedOptions.forEach { option ->
            DropdownMenuItem(
                text = { Text(option) },
                onClick = {
                    viewModel.onEvent(AddEditShotsEvent.EnteredLocation(option))
                    dropDownExpanded.value = false
                }
            )
        }
    }
}

关键优化点 #

• 减少状态频繁切换：仅在匹配选项状态变化时修改dropDownExpanded，降低重组频率，避免焦点丢失。
• 使用实时输入文本过滤：直接用onValueChange的enteredText过滤选项，避免ViewModel状态更新延迟导致的逻辑错误。
• 固定下拉菜单实例：不通过if动态创建/销毁菜单，始终渲染并通过expanded控制显示，避免重组干扰TextField焦点。
• 添加官方交互图标：使用ExposedDropdownMenuDefaults.TrailingIcon提供手动触发下拉的入口，提升体验同时规避焦点问题。
• 移除激进焦点监听：删除onFocusChanged中强制关闭下拉的逻辑，改为通过onDismissRequest和选项点击控制下拉隐藏，避免干扰物理键盘输入。

内容的提问来源于stack exchange，提问作者clamum