How to disable layout modifier for children using Jetpack Compose

Question

I have a Box with textfield inside. i want to hide keyboard by touching on the Box and use modifier of Box for it:

.onFocusEvent { focusState ->
    if (focusState.isFocused) {
        keyboardController?.hide()
    }
}

But this applies to the text field as well, so the keyboard doesn't show up at all. How can i fix it?

Answer 1

You can use the InteractionSource to know if the TextField is focused.
Something like:

var text by remember { mutableStateOf("")}

val interactionSource = remember { MutableInteractionSource() }
val isFocused = interactionSource.collectIsFocusedAsState().value
val keyboardController = LocalSoftwareKeyboardController.current

Box(Modifier
    .fillMaxWidth()
    .clickable {
        if (isFocused) keyboardController?.hide() 
    }
){
    TextField(
        text,
        onValueChange = { text = it },
        interactionSource = interactionSource

    )
}