Hi all. I got the following code. The done buttons...

# compose

[Michael]

Hi all. I got the following code. The done buttons responds to the click(I see the interaction) but the donePressed isn't called. Does any one know why?

val doneButton = UIBarButtonItem(
    title = "Done",
    style = UIBarButtonItemStyle.UIBarButtonItemStyleDone,
    target = object : NSObject() {
        @ObjCAction
        fun donePressed() {
            resignFirstResponder()
            keyboardActions.onDone?.let { action ->
                val scope = object : KeyboardActionScope {
                    override fun defaultKeyboardAction(imeAction: ImeAction) {
                        // Default implementation - can be empty for our use case
                    }
                }
                action.invoke(scope)
            }
        }
    },
    action = sel_registerName("donePressed")
)

[Kirill Grouchnikov]

What is the Compose part in this?

[Michael]

@Composable
actual fun IOSTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    readOnly: Boolean,
    textStyle: TextStyle,
    placeholder: @Composable (() -> Unit)?,
    leadingIcon: @Composable (() -> Unit)?,
    trailingIcon: @Composable (() -> Unit)?,
    supportingText: @Composable (() -> Unit)?,
    isError: Boolean,
    keyboardOptions: KeyboardOptions,
    keyboardActions: KeyboardActions,
    singleLine: Boolean,
    maxLines: Int,
    minLines: Int,
    shape: Shape,
    colors: androidx.compose.material3.TextFieldColors,
    focusRequester: FocusRequester?,
    showDoneButton: Boolean
) {
    if (showDoneButton) {
        val delegate = remember {
            TextFieldDelegate(
                onValueChange = onValueChange,
                onDone = keyboardActions.onDone
            )
        }
        
        // Use UIKitView to create a native UITextField with inputAccessoryView
        UIKitView(
            factory = {
                val textField = UITextField().apply {
                    // Basic styling
                    borderStyle = UITextBorderStyle.UITextBorderStyleRoundedRect
                    
                    // Set initial text
                    text = value
                    
                    // Set placeholder if available (simplified approach)
                    setPlaceholder("Enter text")
                    
                    // Configure keyboard
                    keyboardType = when (keyboardOptions.keyboardType) {
                        androidx.compose.ui.text.input.KeyboardType.Phone -> UIKeyboardTypePhonePad
                        androidx.compose.ui.text.input.KeyboardType.Number -> UIKeyboardTypeNumberPad
                        androidx.compose.ui.text.input.KeyboardType.Email -> UIKeyboardTypeEmailAddress
                        else -> UIKeyboardTypeDefault
                    }
                    
                    // Configure return key
                    returnKeyType = UIReturnKeyType.UIReturnKeyDone
                    
                    // Set delegate
                    setDelegate(delegate)
                    
                    // Create Done button toolbar
                    val toolbar = UIToolbar().apply {
                        setFrame(CGRectMake(0.0, 0.0, 320.0, 44.0))
                        val doneButton = UIBarButtonItem(
                            title = "Done",
                            style = UIBarButtonItemStyle.UIBarButtonItemStyleDone,
                            target = object : NSObject() {
                                @ObjCAction
                                fun donePressed() {
                                    resignFirstResponder()
                                    keyboardActions.onDone?.let { action ->
                                        val scope = object : KeyboardActionScope {
                                            override fun defaultKeyboardAction(imeAction: ImeAction) {
                                                // Default implementation - can be empty for our use case
                                            }
                                        }
                                        action.invoke(scope)
                                    }
                                }
                            },
                            action = sel_registerName("donePressed")
                        )

                        val flexSpace = UIBarButtonItem(
                            barButtonSystemItem = UIBarButtonSystemItem.UIBarButtonSystemItemFlexibleSpace,
                            target = null,
                            action = null
                        )
                        
                        setItems(listOf(flexSpace, doneButton))
                    }
                    
                    inputAccessoryView = toolbar
                }
                
                textField
            },
            update = { textField ->
                // Update text if changed
                if (textField.text != value) {
                    textField.text = value
                }
                // Update enabled state
                textField.enabled = enabled
                // Update editable state
                textField.userInteractionEnabled = !readOnly
            },
            modifier = modifier
        )
    }
}

[Michael]

And used like this:

IOSTextField(
    value = phoneNumber,
    onValueChange = { phoneNumber = it },
    modifier = Modifier.fillMaxWidth().height(56.dp).focusRequester(focusRequester),
    colors = OutlinedTextFieldDefaults.colors().copy(
        focusedContainerColor = MaterialTheme.colorScheme.surface,
        unfocusedContainerColor = MaterialTheme.colorScheme.surface
    ),
    shape = MaterialTheme.shapes.medium,
    leadingIcon = {
        Row(modifier = Modifier.clickable { showCountryPicker = true }
            .padding(horizontal = 8.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(4.dp)) {
            Text(
                text = selectedCountryState.emoji, fontSize = 20.sp
            )
            Text(
                text = selectedCountryState.callingCodes.first(),
                fontSize = 16.sp,
                fontWeight = FontWeight.Medium
            )
        }
    },
    keyboardActions = KeyboardActions(
        onDone = {
            if (phoneScreenModel.hasValidPhoneNumber() && !sendingRequest) {
                focusRequester.freeFocus()
                phoneScreenModel.verifyPhone()
            }
        }),
    singleLine = true,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone),
    placeholder = { Text(stringResource(Res.string.phone_number)) },
    focusRequester = focusRequester,
    showDoneButton = true
)