Search code examples
kotlindrop-down-menuandroid-jetpack-composeandroid-jetpack

Tapping on DropDownMenu causes the keyboard to show up


I've recently update Jetpack Compose to version 1.5.0. I have this piece of code which handles a drop down menu:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun <T> DropDownMenu(
    items: Collection<T>,
    expanded: Boolean,
    enabled: Boolean,
    modifier: Modifier = Modifier,
    selectedItem: T = items.first(),
    label: String? = null,
    formatter: (T) -> String = { it.toString() },
    minNumberOfItems: Int = 2,
    maxNumberOfItems: Int = 4,
    onExpandedChange: (Boolean) -> Unit,
    onDismissRequest: () -> Unit,
    onClick: (T) -> Unit = {},
) {
    var currentItem = selectedItem
    val localDensity = LocalDensity.current
    var itemHeight by remember { mutableStateOf(0.dp) }
    var heightCalculated = false

    ExposedDropdownMenuBox(
        modifier = modifier,
        expanded = expanded && enabled,
        onExpandedChange = onExpandedChange,
    ) {

        TextField(
            value = formatter(currentItem),
            enabled = enabled,
            onValueChange = {},
            readOnly = true,
            singleLine = true,
            textStyle = Typography.bodySmall,
            trailingIcon = {
                if (enabled) {
                    ExposedDropdownMenuDefaults.TrailingIcon(
                        expanded = expanded
                    )
                }
            },
            modifier = Modifier.menuAnchor(),
            supportingText = { label?.let { Text(it) } },
        )

        DropdownMenu(
            expanded = expanded && enabled, onDismissRequest = onDismissRequest,
            modifier = Modifier.height(
                itemHeight * (items.size.coerceIn(
                    minNumberOfItems,
                    maxNumberOfItems
                ) + 0.3f)
            ),
            properties = PopupProperties(focusable = false)
        ) {
            items.forEach { item ->
                DropdownMenuItem(
                    text = { Text(text = formatter(item)) },
                    onClick = {
                        currentItem = item
                        onClick(item)
                    },
                    modifier = Modifier.onGloballyPositioned { coordinates ->
                        if (!heightCalculated) {
                            itemHeight = with(localDensity) { coordinates.size.height.toDp() }
                            heightCalculated = true
                        }
                    }
                )
            }
        }
    }
}

Before updating, this worked as expected: clicking the item simply opened the dropdown menu, without showing the keyboard. Now, the keyboard is opened together with the dropdown menu. Note that the function calling DropDownMenu() has this piece of code as well:

keyboardController = LocalSoftwareKeyboardController.current

Column(
    Modifier
        .fillMaxSize()
        .pointerInput(Unit) {
            detectTapGestures(onTap = {
                localFocusManager?.clearFocus()
            })
        }) 
{
    ...
}

It is used to hide the keyboard when clicking anywhere on the app. I don't think it's the cause of the problem I'm facing, but I'm pasting it anyway just to be sure.

What is happening? How do I prevent the keyboard from showing like before updating Jetpack Compose?


Solution

  • Solved as of Jetpack Compose version 1.5.1: https://developer.android.com/jetpack/androidx/releases/compose-animation#1.5.1