TextField with readonly set to true can be edited [246909589]

Fixed

Bug

Status Update

No update yet.

Description

[Deleted User]

created issue #1

Sep 15, 2022 09:11AM

Jetpack Compose version: 1.2.1

Jetpack Compose component(s) used: androidx.compose.material.TextField

Android Studio Build:Android Studio Chipmunk | 2021.2.1 Build #AI-212.5712.43.2112.8512546, built on April 28, 2022

Kotlin version: 1.7.0

Steps to Reproduce or Code Sample to Reproduce:

1.Run this snippet 2.The TextField is enabled and not readonly for 10 seconds, you can start typing 3.When the 10 seconds have elapsed, the TextField can still be written to using the Virtual Keyboard

Is this a normal behavior? Is there another way to prevent writing to the TextField?

Sample code:

Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    var text by remember { mutableStateOf("Hello") }
                    var readOnly by remember {
                        mutableStateOf(false)
                    }
                    LaunchedEffect(Unit) {
                        delay(Duration.seconds(10))
                        readOnly = true
                    }

                    TextField(
                        value = text,
                        onValueChange = { text = it },
                        label = { Text("Label") },
                        readOnly = readOnly,
                        enabled = !readOnly,
                    )
                }

textfield-bug-repro.mp4

1.3 MB

Download

Comments

lp...@google.com <lp...@google.com> Sep 15, 2022 02:21PM

Assigned to an...@google.com.

dm...@gmail.com <dm...@gmail.com> #2Jul 6, 2023 12:38PM

We have some support in androidx.compose.ui.autofill

Leaving this bug open in case Ralston wants to add more info

kl...@google.com <kl...@google.com> #3Jul 18, 2023 07:00PM

Reassigned to kl...@google.com.

I found an example here. One problem is that it only works with the Google autofill service. When using any other service like Microsoft Authenticator or OneKey, the following error is shown:

D/Autofill Status: Autofill popup isn't shown because autofill is not available.
    
    Did you set up autofill?
    1. Go to Settings > System > Languages&input > Advanced > Autofill Service
    2. Pick a service
    
    Did you add an account?
    1. Go to Settings > System > Languages&input > Advanced
    2. Click on the settings icon next to the Autofill Service
    3. Add your account

Is this a bug on your side or do the app developers of these password managers need to change their implementation?

Message last modified on Jul 18, 2023 07:03PM

kl...@google.com <kl...@google.com> #4Jul 18, 2023 07:02PM

Comment has been deleted.

Message last modified on Jul 18, 2023 07:03PM

kl...@google.com <kl...@google.com> Jul 20, 2023 09:24PM

Accepted by kl...@google.com.

m....@anfe.ma <m....@anfe.ma> #5Jul 24, 2023 03:24PM

deleted

ap...@google.com <ap...@google.com> #6Jul 25, 2023 02:20PM

Marked as fixed.

Facing the same issue here, Google autofill service seems to work. Zero documentation on adding support for Autofill framework on jetpack compose.

na...@google.com <na...@google.com> #7Aug 10, 2023 03:47PM

Hello, I am trying to implement the same thing - it seems like there's no way for current password managers like 1Password or Bitwarden, to automatically pick up the fields. Is there a possible solution?

p....@anfe.ma <p....@anfe.ma> #8Aug 16, 2023 03:07PM

I setup this modifier:

@OptIn(ExperimentalComposeUiApi::class)
fun Modifier.autofill(
    autofillTypes: List<AutofillType>,
    onFill: ((String) -> Unit),
) = composed {
    val autofill = LocalAutofill.current
    val autofillNode = AutofillNode(onFill = onFill, autofillTypes = autofillTypes)
    LocalAutofillTree.current += autofillNode

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

And use it like this:

val emailState = remember { EmailState() }
Email(
    modifier = Modifier.autofill(
        autofillTypes = listOf(
            AutofillType.Username,
            AutofillType.EmailAddress
        ),
        onFill = { emailState.text = it },
    ),
    emailState = emailState,
    onImeAction = { onForgotPasswordSubmitted(emailState.text) }
)

With these steps, autofill works for me.

se...@squareup.com <se...@squareup.com> #9Aug 29, 2023 12:08AM

@lo...@gmail.com comment#8

what version of compose are you using? I'm using latest alpha and the above doesn't work for me. 😭

ek...@uber.com <ek...@uber.com> #10Aug 29, 2023 04:54PM

Works perfectly fine on the latest stable and alpha versions. Did you check in my second comment if you enabled everything?

kl...@google.com <kl...@google.com> #11Aug 29, 2023 06:21PM

I believe so?

I copied the modifier and then used

modifier = Modifier.autofill(
        autofillTypes = listOf(
            AutofillType.Username,
            AutofillType.EmailAddress
        ),
        onFill = { emailState.text = it },
    )

on my text field.

pr...@google.com <pr...@google.com> #12Sep 6, 2023 07:56PM

The auto-filling works for me with the latest alpha version, but I'm never presented with the save dialog though.