column clickable lambda block is not invoked on tap - jetpack compose

Issue

Column(
    Modifier
        .padding(0.dp).clickable {
            expanded = !expanded
        }) {
    OutlinedTextField(
        value = selectedText,
        readOnly = true,
        onValueChange = {
            selectedText = it
            onItemSelected(selectedText)
        },
        modifier = Modifier
            .fillMaxWidth()
            .onGloballyPositioned { coordinates ->
                //This value is used to assign to the DropDown the same width
                textfieldSize = coordinates.size.toSize()
            },
        colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = pearl,
            unfocusedIndicatorColor = ash,
            backgroundColor = white
        ),
        trailingIcon = {
            Icon(icon, "contentDescription",
                Modifier.clickable { expanded = !expanded })
        },
        shape = RoundedCornerShape(12.dp),
        placeholder = {
            Text(text = hint)
        }, maxLines = 1, singleLine = true

    )
 DropdownMenu(
  expanded = expanded,
    ...
 )
    

I am having a drop down menu in jetpack compose, i need to show the dropdown when i click on the column, but clickable lambda block of the column is not getting invoked on tap. What could be the issue?

Solution

The OutlinedTextField "steals" the tap event. Instead of using a click event, you can use the interactionSource to handle the event of that TextField.

Declare the interactionSource within the code where you want to catch the event and pass it to the OutlinedTextField.

var expanded by remember { mutableStateOf(false) }
val interactionSource = remember { MutableInteractionSource() }
val isPressed: Boolean by interactionSource.collectIsPressedAsState()

if (isPressed) {
    expanded = true
}

Column(
    Modifier
        .padding(0.dp)) {
    OutlinedTextField(
        value = selectedText,
        interactionSource = interactionSource,
        readOnly = true,
        onValueChange = {
            selectedText = it
            onItemSelected(selectedText)
        },
        modifier = Modifier
            .fillMaxWidth()
            .onGloballyPositioned { coordinates ->
                //This value is used to assign to the DropDown the same width
                textfieldSize = coordinates.size.toSize()
            },
        colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = pearl,
            unfocusedIndicatorColor = ash,
            backgroundColor = white
        ),
        trailingIcon = {
            Icon(icon, "contentDescription",
                Modifier.clickable { expanded = !expanded })
        },
        shape = RoundedCornerShape(12.dp),
        placeholder = {
            Text(text = hint)
        }, maxLines = 1, singleLine = true

    )
 DropdownMenu(
  expanded = expanded,
  onDismissRequest = { expanded = false }
    ...
 )

Answered By - Huib van Velden