Remove keypad along with ModalBottomSheetLayout in Jetpack compose

Question

After clicking outside BottomSheet, BottomSheet is hidden but the keypad remains persistent. I want to remove the keypad as soon as BottomSheet is hidden in ModalBottomSheetLayout

After clicking the text in compose keypad pops up After clicking outside bottom sheet, bottom sheet disappears but keypad persists

val state = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
val scope = rememberCoroutineScope()
ModalBottomSheetLayout(
    sheetContent = {
        Column {
            var text by remember { mutableStateOf("") }
            OutlinedTextField(
                value = text,
                label = { Text("Text") },
                onValueChange = { text = it }
            )
            var text1 by remember { mutableStateOf("") }
            OutlinedTextField(
                value = text1,
                label = { Text("Text1") },
                onValueChange = { text1 = it }
            )
            OutlinedButton(
                onClick = { click() },
            ) { Text(text = "SUBMIT") }
        }
    },
    sheetState = state,
    content = {
        Greeting(state = state, scope = scope)
    }
)

Answer 1

You need to add keyboard options and actions for the text fields. The keyboard options setup what type of keyboard and action you have on the keyboard. The onAction you pass the lambda to hide the bottom sheet and clear the focus:

 val sheetState = rememberModalBottomSheetState( skipHalfExpanded = true, initialValue = ModalBottomSheetValue.Hidden ) val focusRequester = remember { FocusRequester() } OutlinedTextField( value = text, label = { Text("Text") }, onValueChange = { text = it }, keyboardOptions = KeyboardOptions( keyboardType = KeyboardType.Number, imeAction = ImeAction.Done ), keyboardActions = KeyboardActions( onDone = { coroutineScope.launch { focusRequester.freeFocus() sheetState.hide() } } ) )