TextField in Jetpack Compose 1.7 Does Not Support Japanese Input Correctly with POBox IME on Xperia Devices [373743376]

Fixed

Bug

Status Update

No update yet.

Description

y-...@unext.jp

created issue #1

Oct 16, 2024 03:58AM

Environment:

Jetpack Compose version: 1.7.3
Jetpack Compose component(s) used: TextField
Android Studio Build: Android Studio Koala Feature Drop | 2024.1.2 Patch 1
Kotlin version: 2.0.20
Devices: Xperia 1, Xperia ZL2, Xperia XZ2 Premium
IME: POBox Plus

Issue Summary:
In Jetpack Compose 1.7, when using the POBox IME on Xperia devices, certain Japanese characters such as small characters (e.g., "っ", "ゃ", "ゅ", "ょ") and diacritic marks (dakuten, handakuten) cannot be input into a TextField. Additionally, toggle input (e.g., pressing 'あ' multiple times to switch to 'い', 'う', etc.) does not work as expected.

Steps to Reproduce or Code Sample to Reproduce:

Use a Sony Xperia device with the POBox IME.
Open a Jetpack Compose 1.7 app that contains a TextField.
Attempt to input Japanese characters using a Japanese keyboard (IME), including small characters (e.g., "っ", "ゃ", "ゅ", "ょ") and diacritic marks (dakuten, handakuten), as well as toggle input (e.g., pressing 'あ' multiple times to change it to 'い', 'う', etc.).

For a detailed demonstration of the issue, please refer to the attached reproduction video.

Actual Results:

Small characters like "っ" (small tsu) and "ゃ, ゅ, ょ" (small ya, yu, yo) cannot be entered.
Diacritic marks (dakuten and handakuten) cannot be added to characters.
Toggle input does not work. For example, pressing 'あ' three times should result in 'う', but instead results in 'あああ'.

Expected Results:

Users should be able to input small characters like "っ", "ゃ", "ゅ", "ょ".
Diacritic marks (dakuten and handakuten) should be added properly when required.
Toggle input should function correctly, allowing users to change characters by repeatedly pressing the same key (e.g., 'あ' -> 'い' -> 'う').

Reproduction Rate:

100%
This issue occurs every time under the described conditions.

Environment:

This issue happens regardless of the Android OS version.
The problem occurs specifically on Xperia devices using the POBox IME when Jetpack Compose 1.7's TextField is used.
Jetpack Compose 1.6 does not exhibit this issue.

Additional Information:

According to our investigation, POBox is pre-installed on Xperia devices up to the Xperia 1, released in 2019 (https://www.sony.jp/xperia/xperia/xperia1/?srsltid=AfmBOoox1BTdp0e7TprBv0hcGsft9wxrpNf_-KepPYoCqf6QgXX6axE1). As a result, this issue could affect a significant number of Android users in Japan.

While we suspect the issue may be related to the combination of Xperia devices and POBox, we would greatly appreciate your investigation into a potential solution or workaround within Jetpack Compose.

Workaround Attempted:

As a workaround for this issue, we attempted to directly use EditText within AndroidView by utilizing ViewBinding in the Compose environment. However, we encountered another issue in our project that prevented us from using this workaround effectively.

It would be greatly appreciated if you could also prioritize investigating and addressing this issue. Here is the link to the related issue:
https://partnerissuetracker.corp.google.com/issues/369354336#comment4

Sample App to Reproduce:
You can reproduce the issue using this app:
https://github.com/yurihondo/screentransitionsample

Please especially check the implementation at the following location:
https://github.com/yurihondo/screentransitionsample/blob/c71e4d6f41c76cdeb8a359e3cc6938a5250ac5da/feature/applepie/src/main/java/com/yurihondo/screentransitionsample/applepie/EditRoute.kt#L76

reproduction_video_by_sample_app.mp4

4.1 MB

Download

Comments

jo...@google.com <jo...@google.com> Oct 18, 2024 10:37AM

Reassigned to ha...@google.com.

ha...@google.com <ha...@google.com> #2Oct 21, 2024 10:02PM

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

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

ma...@gmail.com <ma...@gmail.com> #3Oct 22, 2024 11:27AM

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?

to...@gmail.com <to...@gmail.com> #4Oct 22, 2024 01:46PM

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.

Message last modified on Oct 22, 2024 01:49PM

ap...@google.com <ap...@google.com> #5Oct 24, 2024 01:19AM

Marked as fixed.

deleted

ha...@google.com <ha...@google.com> #6Oct 24, 2024 01:33AM

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

ke...@mercari.com <ke...@mercari.com> #7Nov 7, 2024 06:56AM

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?

ha...@google.com <ha...@google.com> #8Nov 7, 2024 12:05PM

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.

ka...@mercari.com <ka...@mercari.com> #9Nov 22, 2024 02:11AM

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