iOS showing Keyboard seems to cause the screen ui issues

[BitByAVampire]

Describe the bug

Simulator.Screen.Recording.-.iPhone.14.-.2024-04-01.at.11.41.36.mov

Affected platforms

• iOS

Versions

• Kotlin version*: 1.9.22
• Compose Multiplatform version*: 1.5.12
• OS version(s)* (required for Desktop and iOS issues): ios 17.2.1, ios 16.4
• OS architecture (x86 or arm64):
• Device (model or simulator for iOS issues): iphone 14 simulator, iphone xr
• JDK (for desktop issues):

To Reproduce
As shown in video above.
heres the code implementing the keyboard of the video:

private fun TextField(text: String, placeHolder: String, onValueChanged: (String) -> Unit) {
    val interactionSource = remember { MutableInteractionSource() }
    BasicTextField(
        value = text,
        onValueChange = { onValueChanged(it) },
        textStyle = MaterialTheme.typography.body1,
        modifier = Modifier.padding(end = 20.dp)
            .border(
                1.dp,
                MaterialTheme.colors.onSurface,
                shape = MaterialTheme.shapes.small
            )
            .fillMaxWidth()
            .defaultMinSize(minHeight = 250.dp),
        interactionSource = interactionSource
    ) {
        TextFieldDefaults.TextFieldDecorationBox(
            value = text,
            innerTextField = it,
            singleLine = false,
            enabled = true,
            visualTransformation = VisualTransformation.None,
            label = null,
            placeholder = {
                Text(
                    text = placeHolder,
                    style = MaterialTheme.typography.body1
                        .copy(color = MoreSummaryGrey)
                )
            },
            interactionSource = interactionSource,
            // change the start padding
            contentPadding = TextFieldDefaults
                .textFieldWithoutLabelPadding(
                    start = 10.dp,
                    end = 10.dp,
                    top = 10.dp,
                    bottom = 10.dp
                )
        )
    }
}

heres the code showing how it's being called:

TextField(
                    text = userMessage,
                    placeHolder = stringsProvider.textFieldPlaceholder,
                    onValueChanged = {
                        isCheckBoxEnabled()
                        userMessage = it
                    }
                )

[BitByAVampire]

also, not sure if this is something that can be fixed on our side, but pressing the return key does not dismiss the keyboard

[paxbun]

For the UI issue, you can remove the padding on the SwiftUI side. You can achieve this via the .ignoreSafeArea(.all) modifier.

Also, to make the keyboard dismissed, you have to set singleLine = true in BasicTextField and keyboardOptions.imeAction = ImeAction.Done like the following.

BasicTextField(
  singleLine = true,
  keyboardOptions = KeyboardOptions(
    imeAction = ImeAction.Done,
  ),
  ...,
)

This was fixed by JetBrains/compose-multiplatform-core#699, and I tried to imitate the behavior of Compose Android.

[BitByAVampire]

For the UI issue, you can remove the padding on the SwiftUI side. You can achieve this via the .ignoreSafeArea(.all) modifier.

Also, to make the keyboard dismissed, you have to set singleLine = true in BasicTextField and keyboardOptions.imeAction = ImeAction.Done like the following.

BasicTextField(
  singleLine = true,
  keyboardOptions = KeyboardOptions(
    imeAction = ImeAction.Done,
  ),
  ...,
)

This was fixed by JetBrains/compose-multiplatform-core#699, and I tried to imitate the behavior of Compose Android.

Thank you! for us, we want to have a multiline textfield, not a single line, anything we can do ?
As well, we cannot use the ignoresaafearea(.all) it would ruin the entire screen layout. where the header and footer enter the unsafearea. we tried using ignoresaafearea(.keyboard, .all) but still sometimes theres whitespace created..

[paxbun]

for us, we want to have a multiline textfield, not a single line, anything we can do ?

I thought you wanted to dismiss the keyboard, but you can just use multiline TextField, and for multiline TextFields, pressing the return keys means adding a newline character. This is not the issue of Compose Multiplatform for iOS; Jetpack Compose on Android also behaves like that.

As well, we cannot use the ignoresaafearea(.all) it would ruin the entire screen layout. where the header and footer enter the unsafearea.

Are you implementing part of your view on the Swift side? Compose has Modifier.displayCutoutPadding() or Modifier.safeContentPadding(), so you can just put ignoreSafeArea(.all) in Swift and handle the safe area in Compose. Compose even has Modifier.imePadding().

we tried using ignoresaafearea(.keyboard, .all) but still sometimes theres whitespace created..

Could you share detailed information about this? There still is a problem with the safe area padding on iPad, but on iPhone everything should work correctly.

[MatkovIvan]

Duplicate of #4016