Jetpack Compose：可编辑TextField联动动态下拉菜单不隐藏问题

问题 #

需要实现一个支持输入过滤的下拉菜单：用户在TextField中输入文本时，下拉选项随输入内容动态更新。当前点击TextField时菜单会显示，但唤起键盘后菜单就会隐藏，期望下拉菜单始终显示并随输入动态更新，不会隐藏。

修改后的代码 #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DynamicSearchDropdown() {
    val options = listOf("Option 1", "comment", "Afghanistan", "Albania", "Algeria", "Andorra", "Egypt")
    var expanded by remember { mutableStateOf(false) }
    var selectedOptionText by remember { mutableStateOf("") }

    ExposedDropdownMenuBox(
        expanded = expanded,
        onExpandedChange = { expanded = it },
    ) {
        TextField(
            modifier = Modifier.menuAnchor(),
            value = selectedOptionText,
            onValueChange = {
                selectedOptionText = it
                // 输入时保持菜单展开状态
                expanded = true
            },
            label = { Text("Label") },
            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
            colors = ExposedDropdownMenuDefaults.textFieldColors(
                focusedContainerColor = Color.White,
                unfocusedContainerColor = Color.White
            ),
            onFocusChanged = { state ->
                // 获取焦点时自动展开菜单
                if (state.isFocused) {
                    expanded = true
                }
            }
        )

        // 根据输入内容过滤选项
        val filteringOptions = options.filter { it.contains(selectedOptionText, ignoreCase = true) }
        DropdownMenu(
            modifier = Modifier
                .background(Color.White)
                .exposedDropdownSize(true),
            // 配置Popup属性，避免键盘唤起时关闭菜单
            properties = PopupProperties(
                focusable = false,
                dismissOnBackPress = true,
                dismissOnClickOutside = true
            ),
            // 仅当菜单展开且有匹配选项时显示
            expanded = expanded && filteringOptions.isNotEmpty(),
            onDismissRequest = { expanded = false },
        ) {
            filteringOptions.forEach { selectionOption ->
                DropdownMenuItem(
                    text = { Text(selectionOption) },
                    onClick = {
                        selectedOptionText = selectionOption
                        // 选择选项后关闭菜单，可根据需求改为保持展开
                        expanded = false
                    },
                    contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding,
                )
            }
        }
    }
}

关键修改说明 #

• 焦点与展开状态绑定：通过onFocusChanged监听TextField焦点，获取焦点时自动展开菜单，确保键盘弹出后菜单不消失。
• 输入时强制保持展开：在onValueChange中设置expanded = true，保证用户输入过程中菜单始终显示并动态更新过滤结果。
• 优化Popup属性：设置focusable = false避免DropdownMenu抢占TextField焦点，同时保留点击外部、返回键关闭菜单的常规交互。
• 菜单显示条件优化：结合expanded状态和过滤结果是否为空，确保无匹配选项时菜单自动隐藏。

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