Inconsistent application of attributes to annotated string within a Text [184760917]

Verified

Bug

Status Update

No update yet.

Description

ex...@gmail.com

created issue #1

Apr 7, 2021 07:54PM

AS Canary 13, beta04

There are some inconsistencies when Text parameters are combined with an AnnotatedString input. In the example below (see screenshot as well) the fontSize, textDecoration, color, and letterSpacing parameters of Text are applied to the whole annotated text, but the fontStyle and fontFamily parameters are not. I expected "World" to display as bold, italic and monospace.

Note also how textDecoration = TextDecoration.LineThrough from the annotated string and TextDecoration.Underline on the Text combine, which seems reasonable, until you consider attributes like color, which override: color specified in annotated text overrides the parameter color in Text for the annotated portion, as expected (not shown in example).

@Composable
fun AnnotatedStringWithinText() {
    val text = buildAnnotatedString {
        append("Hello ")
        withStyle(style = SpanStyle(
            fontWeight = FontWeight.Bold,
            textDecoration = TextDecoration.LineThrough
        )) {
            append("World")
        }
    }
    Text(text = text,
        fontSize = 30.sp, // Applies to "Hello World"
        textDecoration = TextDecoration.Underline, // Applies to "Hello World"
        color = Color.Blue, // Applies to "Hello World"
        letterSpacing = 20.sp, // Applies to "Hello World"
        fontStyle = FontStyle.Italic, // Applies only to "Hello"
        fontFamily = FontFamily.Monospace // Applies only to "Hello"
    )
}

AnnotatedStringWithinText.png

6.8 KB

View

Download

Comments

si...@google.com <si...@google.com> #2Apr 7, 2021 09:08PM

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

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

si...@google.com <si...@google.com> Apr 7, 2021 09:09PM

Assigned to an...@google.com.

si...@google.com <si...@google.com> Apr 7, 2021 09:23PM

Reassigned to ha...@google.com.

ha...@google.com <ha...@google.com> Apr 12, 2021 06:22PM

Accepted by ha...@google.com.

ap...@google.com <ap...@google.com> #3Apr 14, 2021 03:13AM

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?

ha...@google.com <ha...@google.com> May 5, 2021 06:53PM

Marked as fixed.

ap...@google.com <ap...@google.com> #4May 5, 2021 06:53PM

Another problem I am facing with autofill is that it won't save my credentials. I tried forcing to finish the context as described here, but it won't do that either although I filled in the username with the one provided by the Google autofill service.

ex...@gmail.com <ex...@gmail.com> #5May 7, 2021 02:14PM

deleted

ha...@google.com <ha...@google.com> #6May 7, 2021 07:38PM

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

ex...@gmail.com <ex...@gmail.com> #7May 7, 2021 11:41PM

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?

ex...@gmail.com <ex...@gmail.com> #8May 20, 2021 01:39PM

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.

ha...@google.com <ha...@google.com> #9May 20, 2021 03:09PM

Verified by ha...@google.com.

@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. 😭