How to invoke Unit action in Jetpack Compose?

Question

I can't invoke action on my BackNavigationSingleButton() I tried to add to my modifier .clickable(onClick = { backButtonInvoked.invoke() }) but still the same - nothing happens. Action invokes when I add .clickable() to my whole Box()

Scaffold(..., content = {
 TopGeneralInformationSection(backButtonInvoked = { viewModel.actions.trySend(BackButtonInvoked) })
})



@Composable
fun TopGeneralInformationSection(backButtonInvoked: () -> Unit) {
Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(350.dp)
            .clip(RoundedCornerShape(0.dp, 0.dp, 12.dp, 12.dp))
            .background(MaterialTheme.colors.onBackground)
            .padding(10.dp)
        //.clickable(onClick = {backButtonInvoked.invoke()})
    ) {
        Row {
            BackNavigationSingleButton(
                backButtonSelected = { backButtonInvoked.invoke() },
                modifier = Modifier
                    .height(42.dp)
                    .width(60.dp)
                    .clip(RoundedCornerShape(10.dp))
                    .background(MaterialTheme.colors.background)
                    //.clickable(onClick = { backButtonInvoked.invoke() })
            )
      }
    }

}


@Composable
fun BackNavigationSingleButton(
    backButtonSelected: () -> Unit,
    modifier: Modifier
) {
    IconButton(
        modifier = modifier,
        onClick = { backButtonSelected.invoke() }
    ) {
        Icon(
            imageVector = Icons.Filled.ArrowBack,
            modifier = Modifier.padding(10.dp),
            tint = MaterialTheme.colors.primary,
            contentDescription = ""
        )
    }
}

Answer 1

I got the same solution as @Johann, just change those 2 lines.

In TopGeneralInformationSection

backButtonSelected = { backButtonInvoked.invoke() }, 

and change it to

backButtonSelected = { backButtonInvoked() },

Then in BackNavigationSingleButton

onClick = { backButtonSelected.invoke() }

and change it to

onClick = { backButtonSelected() }

Final solution:

@Composable
fun TopGeneralInformationSection(backButtonInvoked: () -> Unit) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(350.dp)
            .clip(RoundedCornerShape(0.dp, 0.dp, 12.dp, 12.dp))
            .background(MaterialTheme.colors.onBackground)
            .padding(10.dp)
        //.clickable(onClick = {backButtonInvoked.invoke()})
    ) {
        Row {
            BackNavigationSingleButton(
                backButtonSelected = { backButtonInvoked() },
                modifier = Modifier
                    .height(42.dp)
                    .width(60.dp)
                    .clip(RoundedCornerShape(10.dp))
                    .background(MaterialTheme.colors.background)
                //.clickable(onClick = { backButtonInvoked.invoke() })
            )
        }
    }

}


@Composable
fun BackNavigationSingleButton(
    backButtonSelected: () -> Unit,
    modifier: Modifier
) {
    IconButton(
        modifier = modifier,
        onClick = { backButtonSelected() }
    ) {
        Icon(
            imageVector = Icons.Filled.ArrowBack,
            modifier = Modifier.padding(10.dp),
            tint = MaterialTheme.colors.primary,
            contentDescription = ""
        )
    }
}

When you call your composable function in the Scaffold try to add a Log or something like this so you can see if the click works

TopGeneralInformationSection {
     Log.d("Hello:", "It works")
}