JetBrains / compose-multiplatform

Compose Multiplatform, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.
https://jetbrains.com/lp/compose-multiplatform
Apache License 2.0
15.99k stars 1.16k forks source link

Scaffold scrolls improperly when keyboard opened on iOS #4902

Closed oblakr24 closed 4 months ago

oblakr24 commented 4 months ago

Describe the bug A clear and concise description of what the bug is.

Affected platforms

Versions

To Reproduce

  1. Prepare a minimum Scaffold setup (Material3 imports)
  2. Click on the text field
  3. Observe as the keyboard opens, but the top part of the scaffold (top bar and the top couple of items) are obscured and cannot be scrolled back down

Expected behavior The content should be scrollable to the top item, and the top bar should be pinned at the top. Works as expected on Android.

Screenshots

Simulator Screenshot - iPhone 15 - 2024-05-30 at 18 46 11 Simulator Screenshot - iPhone 15 - 2024-05-30 at 18 45 55

Minimum reproducible example

 ComposeUIViewController(configure = {
        this.onFocusBehavior = OnFocusBehavior.FocusableAboveKeyboard
    }) {
        Scaffold(
            topBar = {
                Text("TOP BAR")
            },
            content = { paddingValues ->
                val lazyListState = rememberLazyListState()

                LazyColumn(
                    state = lazyListState,
                    modifier = Modifier.padding(paddingValues).fillMaxWidth()
                ) {

                    items(60, key = { it.toString() }, itemContent = { idx ->
                        Text("Item $idx")
                    })
                }
            },
            bottomBar = {
                TextField(value = "", onValueChange = {

                })
            }
        )
    }

Swift code:

struct ComposeView: UIViewControllerRepresentable {

    func makeUIViewController(context: Context) -> UIViewController {
        MainViewControllerKt.MainViewController()
    }

    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
}

struct ContentView: View {

    var body: some View {
        ComposeView()
            .ignoresSafeArea(.keyboard, edges: .all)
    }
}
ASalavei commented 4 months ago

What android:windowSoftInputMode was used in your activity manifest file? OnFocusBehavior.FocusableAboveKeyboard corresponds to the adjustPan, and it works as intended. it seems you're looking for adjustResize behaviour of the compose scene, which currently does not have analogs in SDK for iOS (not supported for now). I would recommend to use WindowInsets.ime in combination with OnFocusBehavior.DoNothing to reach desired behaviour.

oblakr24 commented 4 months ago

Thank you, the combination recommended did the job. I suppose this can be closed.

okushnikov commented 1 month ago

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