DropdownMenu展开后其下方OutlinedTextField无法输入内容的问题

根因 #

DropdownMenu 组件默认展开时会抢占焦点，同时拦截输入事件，导致 OutlinedTextField 失去焦点，无法继续接收用户输入。

修改方案 #

你只需要给 DropdownMenu 添加禁用焦点抢占的配置即可，核心修改点如下：

• 给 DropdownMenu 传入 properties = PopupProperties(focusable = false)，禁止菜单抢占输入框焦点
• 保留原有逻辑的前提下，无需修改其他状态控制代码

修复后完整代码 #

import androidx.compose.ui.window.PopupProperties // 注意导入这个依赖类

var expanded by remember { mutableStateOf(false) }
val suggestions = remember { mutableStateListOf ("karan", "karanx", "karany") }
var selectedText by remember { mutableStateOf("") }
var dropDownWidth by remember { mutableStateOf(0) }
val focusManager = LocalFocusManager.current
Box() {
    OutlinedTextField(
        value = selectedText,
        onValueChange = {
            selectedText = it
            expanded  = true
        },
        modifier = Modifier.fillMaxWidth()
            .onSizeChanged {
                dropDownWidth = it.width
            }
            .onFocusChanged {
                expanded = it.isFocused
            },
        label = { Text("Label") }
    )
    DropdownMenu(
        expanded = expanded,
        onDismissRequest = {
            expanded = false
            focusManager.clearFocus()
        },
        // 新增下方配置禁止菜单抢占焦点
        properties = PopupProperties(focusable = false),
        modifier = Modifier
            .width(with(LocalDensity.current) { dropDownWidth.toDp() })
            .border(width = 2.dp,color = Color.Blue)
    ) {
        suggestions.forEach { label ->
            DropdownMenuItem(onClick = {
                selectedText = label
                expanded = false
                focusManager.clearFocus()
            }) {
                Text(text = label)
            }
        }
    }
}

额外说明 #

你代码注释中提到的为什么不能在OutlinedTextField的clickable修饰符里设置expanded = true，是因为OutlinedTextField本身已经内置了点击交互逻辑，外层额外添加的clickable会和内置逻辑产生冲突，当前你用onFocusChanged触发菜单展开是更合理的实现方式。

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