Keyboard not showing on TextField focused in ModalBottomSheet compose

Question

I have the following issue in compose.

I have a ModalBottomSheet which has a TextField. The keyboard does not show up when I click inside the text field. On an emulator I can type in some input with my computer keyboard shows up. On a real device though I don't have that possibility with makes the ModalBottomSheet useless.

I read this article about the same issue and there identifying the version compose-ui 1.4.0 as source of the problem. So I went to this page where they state that the issue has been fixed with version. After updating my gradle as follows the keyboard still does not show up.

implementation "androidx.compose.material3:material3:1.1.0-rc01"
implementation "androidx.compose.material3:material3-window-size- 
 class:1.1.0-rc01"
implementation 'androidx.compose.ui:ui:1.4.2'

Answer 1

In case someone comes across here with a similar issue, ensure you have the isFocusable set to true (see below):

    ModalBottomSheet(
        onDismissRequest = onDismissRequest,
        dragHandle = null,
        containerColor = Color.Transparent,
        scrimColor = Color.Transparent,
        modifier = Modifier
            .fillMaxSize()
            .statusBarsPadding()
            .navigationBarsPadding(),
        sheetState = sheetState,
        shape = RectangleShape,
        properties = ModalBottomSheetProperties(
            securePolicy = SecureFlagPolicy.SecureOff,
            isFocusable = true, // IMPORTANT!!! This must be true so TextField can show keyboard
            shouldDismissOnBackPress = false
        )
    ) {
        CheckoutSheetScaffold(checkout = checkout, onDismissRequest = onDismissRequest)
    }

Answer 2

The same thing was happening to me: I used a ModalBottomSheet and I had to use a BottomSheetScaffold() and, in the content of the bottomSheet, I had to put a modifier with VerticalScroll to the column that contained the text fields.

Answer 3

This works for me using BOM 2023.04.01 and Material3 1.1.0-rc01, testing on a Pixel 7 Pro. I'm using a version catalog libs.versions.toml that looks like this:

[versions]
com-android-application = "8.1.0-alpha11"
org-jetbrains-kotlin-android = "1.8.20"
core-ktx = "1.10.0"
junit = "4.13.2"
androidx-test-ext-junit = "1.1.5"
espresso-core = "3.5.1"
lifecycle-runtime-ktx = "2.6.1"
activity-compose = "1.7.1"
compose-bom = "2023.04.01"
material3 = "1.1.0-rc01"

[libraries]
core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "core-ktx" }
junit = { group = "junit", name = "junit", version.ref = "junit" }
androidx-test-ext-junit = { group = "androidx.test.ext", name = "junit", version.ref = "androidx-test-ext-junit" }
espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espresso-core" }
lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycle-runtime-ktx" }
activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activity-compose" }
compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "compose-bom" }
ui = { group = "androidx.compose.ui", name = "ui" }
ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }
ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }
ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
material3 = { group = "androidx.compose.material3", name = "material3", version.ref = "material3" }

[plugins]
com-android-application = { id = "com.android.application", version.ref = "com-android-application" }
org-jetbrains-kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "org-jetbrains-kotlin-android" }

[bundles]

The dependencies from the build.gradle.kts file:

dependencies {

    implementation(libs.core.ktx)
    implementation(libs.lifecycle.runtime.ktx)
    implementation(libs.activity.compose)
    implementation(platform(libs.compose.bom))
    implementation(libs.ui)
    implementation(libs.ui.graphics)
    implementation(libs.ui.tooling.preview)
    implementation(libs.material3)
    testImplementation(libs.junit)
    androidTestImplementation(libs.androidx.test.ext.junit)
    androidTestImplementation(libs.espresso.core)
    androidTestImplementation(platform(libs.compose.bom))
    androidTestImplementation(libs.ui.test.junit4)
    debugImplementation(libs.ui.tooling)
    debugImplementation(libs.ui.test.manifest)
}

And the Compose snippet that works:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ModalBottomSheetSample() {
    var openBottomSheet by rememberSaveable { mutableStateOf(false) }
    val bottomSheetState = rememberModalBottomSheetState()

    Button(onClick = { openBottomSheet = !openBottomSheet }) {
        Text(text = "Show Bottom Sheet")
    }

    if (openBottomSheet) {
        ModalBottomSheet(
            onDismissRequest = { openBottomSheet = false },
            sheetState = bottomSheetState,
        ) {
            var text by remember { mutableStateOf("") }
            TextField(value = text, onValueChange = {text = it} )
        }
    }
}