iOS: Bottom sheet content isn't fully visible when keyboard is shown

[syru88]

Describe the bug When bottom sheet with TextField and another view is shown and TextField is focused, keyboard overlaps part of bottom sheet and I'm not able to see "Close" button . (check attached video)

Affected platforms

• iOS

Versions

• Libraries:
  • Compose Multiplatform version: 1.6.10
• Kotlin version: 2.0.0
• OS version(s) (required for Desktop and iOS issues): 17.0, 17.5...
• OS architecture (x86 or arm64): arm64
• Device (model or simulator for iOS issues): iPhone 15 iOS 17.5 Simulator (happens on other versions as well)

To Reproduce Steps to reproduce the behavior:

1. Checkout code from https://github.com/syru88/BottomSheetWithInputAndButton or use this snippet:

   
   @OptIn(ExperimentalMaterial3Api::class)
   @Composable
   @Preview
   fun App() {
   MaterialTheme {
       val sheetState = rememberModalBottomSheetState()
       var dialogShown by remember { mutableStateOf(false) }
   
       Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
           if (dialogShown) {
               ModalBottomSheet(
                   onDismissRequest = { dialogShown = false },
                   sheetState = sheetState
               ) {
                   Column(
                       modifier = Modifier.padding(16.dp),
                       verticalArrangement = Arrangement.spacedBy(16.dp)
                   ) {
                       var text by remember { mutableStateOf("") }
                       TextField(value = text, onValueChange = { text = it })
   
                       val scope = rememberCoroutineScope()
                       SimpleButton("Close") {
                           scope.launch { sheetState.hide() }.invokeOnCompletion {
                               if (!sheetState.isVisible) {
                                   dialogShown = false
                               }
                           }
                       }
                   }
               }
           }
   
           SimpleButton("Open dialog") {
               dialogShown = true
           }
       }
   }
   }

@Composable private fun SimpleButton(text: String, onClick: () -> Unit) { Button(onClick) { Text(text) } }

2. Click on "Open dialog"
3. TextField and "Close" button are visible
4. Click to textfield - "Close" button is gone

**Expected behavior**
Close button should be visible. It works on Android.

**Screenshots**

https://github.com/JetBrains/compose-multiplatform/assets/3898471/33324725-41a8-49a2-8dbf-7690c8cec9ab

[terrakok]

You are supposed to add a windows insets handling to the bottomsheet:

ModalBottomSheet(
    onDismissRequest = { dialogShown = false },
    sheetState = sheetState,
    windowInsets = WindowInsets.ime
) {...}

https://github.com/JetBrains/compose-multiplatform/assets/3532155/c5b01577-76bb-48cd-9c48-2c50e699b454

[syru88]

thank you very much! 👏 Anyway, when I tried your solution, the result wasn't perfect. You have probably different simulator or use ComposeView().ignoresSafeArea(.all) in swift. With ComposeView().ignoresSafeArea(.keyboard), which is default from KMP wizard, the result is as follows...

[terrakok]

You are right. I use .all

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.