Jetpack Compose自定义AutoComplete组件弹出建议时无法输入的解决问询

问题描述 #

基于StackOverflow的一个答案实现AutoComplete Composable函数，修复低级问题后仍未达预期：用户在文本框输入时，下方会弹出匹配的建议列表，但建议弹出后文本框完全无法输入。

现有代码 #

AutoComplete 实现代码 #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AutoComplete(
    labelText: String,
    options: List<String>,
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
) {
    var expanded by remember { mutableStateOf(false) }
    val filterOpts = options.filter { it.contains(value, ignoreCase = true) }

    ExposedDropdownMenuBox(
        expanded = expanded,
        onExpandedChange = { expanded = !expanded }) {
        TextField(
            label = { Text(text = labelText) },
            value = value,
            onValueChange = onValueChange,
            colors = ExposedDropdownMenuDefaults.textFieldColors(),
            modifier = modifier.menuAnchor(),
            keyboardOptions = keyboardOptions,
        )
        if (!filterOpts.isEmpty()) {
            ExposedDropdownMenu(
                expanded = expanded,
                onDismissRequest = { expanded = false }) {
                filterOpts.forEach { option ->
                    DropdownMenuItem(
                        text = { Text(text = option) },
                        onClick = {
                            onValueChange(option)
                            expanded = false
                        }
                    )
                }
            }
        }
    }
}

演示示例代码 #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AutoCompleteExample() {
    Scaffold(topBar = { TopAppBar(title = { Text("AutoCompleteExample") }) }) { innerPadding ->
        Column(modifier = Modifier.padding(innerPadding)) {
            val names = listOf("Tony Stark", "Steve Rogers", "Bruce Banner", "Natasha Romanoff")
            var name by remember { mutableStateOf("") }

            AutoComplete(
                labelText = "Name",
                options = names,
                value = name,
                onValueChange = { name = it },
            )
        }
    }
}

问题截图 #

修复方案及修改代码 #

问题核心是菜单展开状态由手动点击控制，而非输入内容驱动，导致点击TextField输入时会触发菜单收起，同时焦点被干扰。修改后让菜单展开/收起完全由输入内容和过滤结果控制，确保输入时菜单保持展开且TextField可正常输入：

修改后的AutoComplete代码 #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AutoComplete(
    labelText: String,
    options: List<String>,
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
) {
    var expanded by remember { mutableStateOf(false) }
    val filterOpts = options.filter { it.contains(value, ignoreCase = true) }

    // 监听输入内容和过滤结果，自动控制菜单展开状态
    LaunchedEffect(value, filterOpts) {
        expanded = value.isNotEmpty() && filterOpts.isNotEmpty()
    }

    ExposedDropdownMenuBox(
        expanded = expanded,
        // 取消手动切换展开状态，由输入逻辑驱动
        onExpandedChange = { }
    ) {
        TextField(
            label = { Text(text = labelText) },
            value = value,
            onValueChange = onValueChange,
            colors = ExposedDropdownMenuDefaults.textFieldColors(),
            modifier = modifier.menuAnchor(),
            keyboardOptions = keyboardOptions,
            // 移除默认下拉图标，避免用户误触干扰输入逻辑
            trailingIcon = null
        )
        // 只要有过滤结果就渲染菜单，展开状态由expanded控制
        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            filterOpts.forEach { option ->
                DropdownMenuItem(
                    text = { Text(text = option) },
                    onClick = {
                        onValueChange(option)
                        expanded = false
                    }
                )
            }
        }
    }
}

关键修改点 #

1. 自动控制展开状态：使用LaunchedEffect监听输入值value和过滤结果filterOpts，当输入非空且有匹配选项时自动展开菜单，否则收起，完全由输入内容驱动。
2. 取消手动切换逻辑：清空ExposedDropdownMenuBox的onExpandedChange回调，避免点击TextField时误触发菜单收起。
3. 移除干扰图标：去掉TextField默认的下拉图标，防止用户误触切换菜单状态，保持交互逻辑统一。

如果需要保留下拉图标，可以在onExpandedChange中添加逻辑，确保点击图标时仅切换展开状态，同时输入时菜单保持展开：

onExpandedChange = { newExpanded ->
    expanded = newExpanded
}

但建议优先采用输入驱动的展开逻辑，更符合AutoComplete的用户预期。

内容的提问来源于stack exchange，提问作者Code-Apprentice