IssueTracker

Component used: androidx.autofill:autofill Version used: 1.1.0, but the same issues are also reproducible on the latest alpha (1.3.0-alpha01) Devices/Android versions reproduced on: Pixel 8 pro

In the following sample code, auto filling phone number will also (incorrectly) auto fill the email. There are also times when auto fill does not trigger at all, and the user has to manually type in the email/phone.

Here's a screen recording of the issues: https://drive.google.com/file/d/1Kf6DLiTXGOSDjiWe5qLGpQBojXVDf0GJ/view?usp=sharing

@file:OptIn(ExperimentalComposeUiApi::class)

package com.stripe.android.paymentsheet.example

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.Checkbox
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.autofill.AutofillNode
import androidx.compose.ui.autofill.AutofillType
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.layout.boundsInWindow
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalAutofill
import androidx.compose.ui.platform.LocalAutofillTree

internal class JayActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            val random = remember { mutableStateOf("") }
            val email = remember { mutableStateOf("") }
            val phone = remember { mutableStateOf("") }

            var emailVisible by remember { mutableStateOf(true) }
            var phoneVisible by remember { mutableStateOf(true) }

            Column {
                Checkbox(checked = emailVisible, onCheckedChange = { emailVisible = !emailVisible })
                Checkbox(checked = phoneVisible, onCheckedChange = { phoneVisible = !phoneVisible })

                TextFieldCool(label = "Random", autofillType = AutofillType.AddressStreet, value = random)

                if (emailVisible) {
                    TextFieldCool("Email", AutofillType.EmailAddress, email)
                }
                if (phoneVisible) {
                    TextFieldCool("Phone", AutofillType.PhoneNumberNational, phone)
                }
            }
        }
    }
}

@Composable
private fun TextFieldCool(
    label: String,
    autofillType: AutofillType,
    value: MutableState<String>,
) {
    TextField(
        value = value.value,
        onValueChange = {
            value.value = it
        },
        modifier = Modifier
            .fillMaxWidth()
            .autofill(
                type = autofillType,
                onFill = { value.value = it },
            ),
        label = {
            Text(label)
        },
        placeholder = {
            Text(text = label)
        },
        singleLine = true,
    )
}

@Composable
private fun Modifier.autofill(
    type: AutofillType,
    onFill: (String) -> Unit,
): Modifier {
    val autofillNode = remember(type) {
        AutofillNode(
            autofillTypes = listOf(type),
            onFill = onFill,
        )
    }

    val autofill = LocalAutofill.current
    LocalAutofillTree.current += autofillNode

    return onGloballyPositioned {
        autofillNode.boundingBox = it.boundsInWindow()
    }.onFocusChanged { focusState ->
        if (autofillNode.boundingBox != null) {
            autofill?.run {
                if (focusState.isFocused) {
                    requestAutofillForNode(autofillNode)
                } else {
                    cancelAutofillForNode(autofillNode)
                }
            }
        }
    }
}