当下拉菜单显示时，Jetpack Compose中的OutlinedTextField失去焦点

Question

I have the following code:

Box(
    Modifier.fillMaxWidth(),
    contentAlignment = Alignment.Center
) {
    OutlinedTextField(
        value = text,
        onValueChange = {
            text = it
            if (text.length >= 3) {
                viewModel.getSuggestions(text)
            }
        },
        label = { Text("Search") },
        modifier = Modifier.fillMaxWidth(),
        singleLine = true,
        leadingIcon = {
            Icon(
                painter = painterResource(id = R.drawable.ic_search),
                contentDescription = null,
                modifier = Modifier.padding(16.dp, 0.dp, 8.dp, 0.dp),
                tint = Color.Unspecified
            )
        },
        shape = RoundedCornerShape(50)
    )

    DropdownMenu(expanded = suggestions.value.isNotEmpty(),
        modifier = Modifier
            .fillMaxWidth(0.92f),
        onDismissRequest = {  }) {

        for (suggestion in suggestions.value) {
            DropdownMenuItem(onClick = {
                viewModel.searchWord(suggestion)
            }) {
                Text(suggestion)
            }
        }
    }
}

这是一个词典，屏幕顶部有一个 OutlinedTextField。

当我搜索单词时，根据输入的内容提供建议，并在 DropdownMenu 中显示它们。

我遇到的问题是，当 DropdownMenu 显示时，键盘消失了，但焦点仍然停留在 Text 字段上。我该如何解决这个问题，最重要的是，为什么会出现这种情况？我知道它会根据状态更改重新绘制 UI，但为什么它不保持键盘打开呢？

- Marian Pavel

Answer 1

DropdownMenu(properties = PopupProperties(focusable = false))

请检查这个

- ngalashev

---

那么，您不能通过在其外部单击来关闭下拉列表。 - arekolek

使用ExposedDropdownMenu时无法工作。 - Sadegh J

Answer 2

如果您正在使用compose 1.+，那么您可以使用ExposedDropDownMenuBox代替Box，这将在不失去焦点的情况下显示内容。

https://developer.android.com/reference/kotlin/androidx/compose/material/ExposedDropdownMenuBoxScope

ExposedDropDownMenuBox(
    Modifier.fillMaxWidth(),
    contentAlignment = Alignment.Center
) {
    OutlinedTextField(
        value = text,
        onValueChange = {
            text = it
            if (text.length >= 3) {
                viewModel.getSuggestions(text)
            }
        },
        label = { Text("Search") },
        modifier = Modifier.fillMaxWidth(),
        singleLine = true,
        leadingIcon = {
            Icon(
                painter = painterResource(id = R.drawable.ic_search),
                contentDescription = null,
                modifier = Modifier.padding(16.dp, 0.dp, 8.dp, 0.dp),
                tint = Color.Unspecified
            )
        },
        shape = RoundedCornerShape(50)
    )

    DropdownMenu(expanded = suggestions.value.isNotEmpty(),
        modifier = Modifier
            .fillMaxWidth(0.92f),
        onDismissRequest = {  }) {

        for (suggestion in suggestions.value) {
            DropdownMenuItem(onClick = {
                viewModel.searchWord(suggestion)
            }) {
                Text(suggestion)
            }
        }
    }
}

- Arpit Patel