Hello People, I have added a TextField in Alert Di...

# compose-ios

[लातों वाला भूत]

Hello People,
I have added a TextField in Alert Dialog for user input. It works fine in Android. However in iOS on clicking the text field keyboard appears and disappears instantly. It seems like the keyboard scrolls the dialog upwards which in turn dismisses the keyboard again. Has anyone faced this? Adding code in thread.

[लातों वाला भूत]

val inputText = mutableStateOf("")

    AlertDialog(
        title = {
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                icon?.invoke()
                Text(text = title, fontSize = 20.sp)
            }
        },
        text = {
            MedialTextField(
                value = inputText.value,
                maxLines = maxLines,
                onValueChange = { inputText.value = it },
                label = hint ?: "",
                modifier = textFieldModifier.fillMaxWidth(),
                endIcon = trailingIcon?.let { { it.invoke() } }
            )
        },
        onDismissRequest = onDismissRequest,
        confirmButton = {
            TextButton(
                onClick = { onConfirmation(inputText.value) },
                enabled = canSubmit(inputText.value)
            ) {
                Text(positiveButtonText)
            }
        },
        dismissButton = {
            TextButton(onClick = onDismissRequest) {
                Text(negativeButtonText)
            }
        },
        modifier = modifier,
    )

[लातों वाला भूत]

@Composable
fun MedialTextField(
    value: String,
    onValueChange: (String) -> Unit,
    label: String,
    singleLine: Boolean = true,
    maxLines: Int = 1,
    readOnly: Boolean = false,
    error: String? = null,
    interactionSource: MutableInteractionSource? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    endIcon: @Composable (() -> Unit)? = null,
    modifier: Modifier = Modifier
) {
    OutlinedTextField(
        value = value,
        onValueChange = onValueChange,
        label = { Text(text = label) },
        singleLine = singleLine,
        maxLines = maxLines,
        textStyle = MaterialTheme.typography.bodyMedium,
        shape = RoundedCornerShape(12.dp),
        trailingIcon = endIcon,
        leadingIcon = leadingIcon,
        interactionSource = interactionSource ?: remember { MutableInteractionSource() },
        modifier = modifier,
        readOnly = readOnly,
        isError = error != null,
        supportingText = error?.let {
            {
                Text(text = it, fontSize = 10.sp, color = MaterialTheme.colorScheme.error)
            }
        },
        colors = OutlinedTextFieldDefaults.colors(
            focusedLabelColor = MaterialTheme.colorScheme.primary,
            unfocusedLabelColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.60f),
            focusedBorderColor = MaterialTheme.colorScheme.primary,
            unfocusedBorderColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.60f),
        )
    )
}

[Khanzada Kashif]

I can't seem to find it, but this issue was posted on issue tracker and as far as I remember it hasn't been fixed yet.

[लातों वाला भूत]

Oh so for now how do we add a textfield in a dialog?

[Khanzada Kashif]

you can try adding this configuration,

ComposeUIViewController(
    configure = {
        onFocusBehavior = OnFocusBehavior.DoNothing
    }
) {}

it might solve it.

[लातों वाला भूत]

I already have this in place

[Khanzada Kashif]

Found the article, it has both the custom solution and the link to issue tracker.

https://patrykkosieradzki.com/how-to-fix-keyboard-issues-introduced-in-the-latest-jetpack-compose-1-4-0/

[लातों वाला भूत]

Thanks a lot

[Khanzada Kashif]

Mention not.

[लातों वाला भूत]

This talks about Android. But in my case Android works fine. Its iOS causing the issues.