2

I have a LazyColumn consisting of text fields with numeric input. When I switch between text fields, I sometimes see a flicker. It first opens the normal text keyboard and then switches to numeric one. This is leading to a really bad UX.

My code:

LazyColumn {
    items(payers) {
        Row {
            Image(...)
            Text(...)
            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier
                    .border(1.dp, Color.Gray, RoundedCornerShape(4.dp))
                    .padding(vertical = 4.dp)
            ) {
                BasicTextField(
                    value = it.amount,
                    onValueChange = { /* Update it.amount */ },
                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
                )
                if (it.amount.isEmpty())
                    Text(
                        text = "₹ 0",
                        modifier = Modifier.alpha(0.5f)
                    )
            }
        }
    }
}

Result:

enter image description here


How to avoid this flicker?
Arpit Shukla
  • 9,612
  • 1
  • 14
  • 40
  • Yeah actually I'm very sleepy at the moment so for now, just try, instead of using default KeyBoardType.Number, try configuring it to allow only a set of digits, something like "12345667890." – Richard Onslow Roper Nov 04 '21 at 18:30
  • 1
    I don't want to show alphabets to user and then restrict them from typing those – Arpit Shukla Nov 04 '21 at 18:34
  • How to "allow" certain characters in Compose Text Field? Don't say "filter those out when onValueChange is triggered". I don't think that is gonna change keyboard type – Arpit Shukla Nov 04 '21 at 18:39

1 Answers1

2

This looks like a known bug (specifically, that the keyboard type changes very quickly during focus request).

You can follow along on the bug tracker for updates.

Ryan M
  • 18,333
  • 31
  • 67
  • 74
Zach Klippenstein
  • 66
  • 3