ExposedDropdownMenuBox需两次Tab才能获取/切换焦点问题求助

问题现象 #

在桌面跨平台Compose应用优化键盘导航时，遇到以下异常：

• 混合普通TextField与自定义OutlinedDropDown（基于ExposedDropdownMenuBox实现）时，OutlinedDropDown需要两次Tab按键才能完成焦点切换：从TextField按Tab会先移除当前焦点，再按一次才会聚焦下拉框并弹出菜单。
• 选中下拉选项后，按Tab会先让OutlinedDropDown失焦，再按一次Tab才能聚焦到下一个输入框。
• 尝试给ExposedDropdownMenuBox和内部TextField添加focusable()、onFocusEvent修饰符，问题未解决。

问题原因 #

ExposedDropdownMenuBox与内部TextField默认都是独立的焦点节点，Tab导航时会依次遍历这两个节点，导致需要两次Tab才能完成预期的焦点切换；手动添加的focusable()会额外增加焦点层级，进一步加重问题。

解决方案 #

通过以下修改优化焦点流转逻辑：

1. 移除ExposedDropdownMenuBox上的focusable()修饰符，避免额外焦点节点。
2. 使用FocusRequester统一管理内部TextField的焦点状态，关联下拉框展开逻辑。
3. 处理Tab导航与选项选中后的焦点转移，确保一次Tab即可完成预期切换。

修改后的OutlinedDropDown代码 #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun <Value> OutlinedDropDown(
    modifier: Modifier = Modifier,
    isEnabled: Boolean,
    label: String,
    displayValue: String,
    isError: Boolean = false,
    textFieldColors: TextFieldColors,
    onClick: (Value) -> Unit,
    dropDownContent: () -> List<Pair<String, Value>>
) {
    var isExpanded by remember { mutableStateOf(false) }
    val focusRequester = remember { FocusRequester() }

    ExposedDropdownMenuBox(
        modifier = modifier.padding(bottom = 16.dp),
        expanded = isExpanded,
        onExpandedChange = { newExpanded ->
            isExpanded = newExpanded
            if (newExpanded) focusRequester.requestFocus()
        },
    ) {
        TextField(
            isError = isError,
            enabled = isEnabled,
            modifier = Modifier
                .fillMaxWidth()
                .menuAnchor(MenuAnchorType.PrimaryEditable, true)
                .focusRequester(focusRequester)
                .onFocusEvent { focusState ->
                    if (focusState.isFocused && isEnabled) isExpanded = true
                },
            readOnly = true,
            value = displayValue,
            onValueChange = {},
            label = if (label.isBlank()) null else { { Text(label) } },
            colors = textFieldColors,
            singleLine = true,
            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
            keyboardActions = KeyboardActions(
                onNext = { isExpanded = false }
            )
        )
        if (isEnabled) {
            ExposedDropdownMenu(
                expanded = isExpanded,
                onDismissRequest = { isExpanded = false }
            ) {
                dropDownContent.invoke().forEach { displayAndValue ->
                    DropdownMenuItem(
                        enabled = isEnabled,
                        text = { Text(displayAndValue.first, maxLines = 1) },
                        onClick = {
                            onClick.invoke(displayAndValue.second)
                            isExpanded = false
                            focusRequester.freeFocus()
                        },
                        contentPadding = PaddingValues(16.dp),
                    )
                }
            }
        }
    }
}

关键修改说明 #

• 移除ExposedDropdownMenuBox上的focusable()和手动onFocusEvent，消除多余焦点节点。
• 新增FocusRequester，确保下拉展开时焦点正确落在TextField上，避免焦点丢失。
• 在TextField的onFocusEvent中，触发焦点时自动展开下拉菜单，无需额外Tab操作。
• 通过keyboardActions处理Tab（Next）操作，关闭下拉菜单并让焦点直接流转到下一个组件。
• 选中选项后调用focusRequester.freeFocus()释放焦点，确保Tab能直接切换到下一个输入框。

组件使用示例 #

Row() {
    OutlinedDropDown(
        modifier = Modifier.weight(0.40f).padding(2.dp),
        isEnabled = true,
        label = "第一个下拉框",
        displayValue = "选中值1",
        textFieldColors = OutlinedTextFieldDefaults.colors(),
        onClick = { /* 处理选中逻辑 */ }
    ) {
        listOf("选项1" to "值1", "选项2" to "值2")
    }

    OutlinedDropDown(
        modifier = Modifier.weight(0.30f).padding(2.dp),
        isEnabled = true,
        label = "第二个下拉框",
        displayValue = "选中值2",
        textFieldColors = OutlinedTextFieldDefaults.colors(),
        onClick = { /* 处理选中逻辑 */ }
    ) {
        listOf("选项A" to "值A", "选项B" to "值B")
    }
    
    OutlinedDropDown(
        modifier = Modifier.weight(0.30f).padding(2.dp),
        isEnabled = true,
        label = "第三个下拉框",
        displayValue = "选中值3",
        textFieldColors = OutlinedTextFieldDefaults.colors(),
        onClick = { /* 处理选中逻辑 */ }
    ) {
        listOf("选项X" to "值X", "选项Y" to "值Y")
    }
}

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