Jetpack Compose搜索式下拉菜单：键盘焦点保持与锚定问题解决

一、阻止下拉展开时键盘收起 #

问题核心在于外层布局的点击事件干扰输入框焦点，以及下拉菜单默认会抢占焦点，以下是针对性修复：

1. 移除外层Box的clickable修饰符
   原代码中外层Box的clickable会导致点击输入框时触发状态切换，同时抢走输入框焦点，直接删除该修饰符即可。

2. 给OutlinedTextField添加点击展开逻辑
   在输入框的modifier中添加clickable，点击时切换下拉状态并主动请求焦点，确保输入框始终持有焦点：

.clickable {
    expanded = !expanded
    focusRequester.requestFocus()
}

3. 用LaunchedEffect确保焦点稳定
   监听expanded状态变化，当下拉菜单展开时，通过LaunchedEffect异步请求焦点，避免同步调用的时序问题：

LaunchedEffect(expanded) {
    if (expanded) {
        focusRequester.requestFocus()
    }
}

4. 禁止DropdownMenu获取焦点
   给下拉菜单添加focusProperties配置，设置canFocus = false，这样点击下拉选项时不会抢走输入框的焦点：

.modifier = Modifier
    .fillMaxWidth()
    .heightIn(max = 100.dp)
    .focusProperties { canFocus = false }

二、确保下拉菜单始终锚定在输入框下方 #

Material3的DropdownMenu提供了anchor参数，直接指定锚定的输入框组件，即可自动保持锚定关系：

• 移除原外层的Box布局，改用Column承载输入框和下拉菜单
• 将DropdownMenu的anchor参数设置为输入框的modifier引用，下拉菜单会自动锚定在输入框下方，跟随输入框位置变化

完整修改后的代码 #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SelectBox() {
    var expanded by remember { mutableStateOf(false) }
    var textInput by remember { mutableStateOf("") }
    var selectedDepartment by remember { mutableStateOf<String?>(null) }
    val departments = DepartmentData.departments
    val focusRequester = remember { FocusRequester() }

    val filteredDepartments = departments.filter {
        it.lowercase().contains(textInput.lowercase())
    }

    // 监听展开状态，确保输入框焦点稳定
    LaunchedEffect(expanded) {
        if (expanded) {
            focusRequester.requestFocus()
        }
    }

    Column(modifier = Modifier.fillMaxWidth()) {
        val textFieldModifier = Modifier
            .fillMaxWidth()
            .height(58.dp)
            .focusRequester(focusRequester)
            .clickable {
                expanded = !expanded
                focusRequester.requestFocus()
            }

        OutlinedTextField(
            value = textInput,
            onValueChange = {
                textInput = it
                if (it.isNotEmpty()) expanded = true
            },
            label = { Text("Department") },
            modifier = textFieldModifier,
            shape = RoundedCornerShape(8.dp),
            singleLine = true,
            trailingIcon = {
                Icon(
                    imageVector = if (expanded) Icons.Default.KeyboardArrowUp else Icons.Default.KeyboardArrowDown,
                    contentDescription = "Dropdown toggle",
                    modifier = Modifier.clickable {
                        expanded = !expanded
                        focusRequester.requestFocus()
                    }
                )
            },
            colors = TextFieldDefaults.outlinedTextFieldColors(
                focusedBorderColor = Color(0xFF153A99),
                focusedLabelColor = Color(0xFF153A99)
            )
        )

        DropdownMenu(
            expanded = expanded,
            onDismissRequest = {
                expanded = false
                focusRequester.requestFocus()
            },
            anchor = textFieldModifier, // 指定锚定输入框
            modifier = Modifier
                .fillMaxWidth()
                .heightIn(max = 100.dp)
                .focusProperties { canFocus = false } // 禁止下拉菜单抢占焦点
        ) {
            filteredDepartments.forEach { department ->
                DropdownMenuItem(
                    text = { Text(department) },
                    onClick = {
                        selectedDepartment = department
                        textInput = department
                        expanded = false
                        focusRequester.requestFocus()
                    }
                )
            }
        }
    }
}

额外说明 #

• 选择下拉选项后，代码保留了输入框焦点逻辑，若需要收起键盘，可删除对应位置的focusRequester.requestFocus()
• 使用Column替代Box，配合anchor参数，确保布局结构清晰且锚定关系稳定

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