1

I have a lazyList of items where I am showing a number. When the user presses the number, I show a TextField, so that the user can edit the number.

However, if I want to edit a number that is below where the IME will appear, the textfield will immediatly lose focus and trigger the showNumber method.

I show/hide the number/textfield like so:

if (isEditing) ExpenseTextField() {
    isEditing = false // onConfirmInput
} else ExpenseDisplay() {
    isEditing = true  // onClickNumber
}

In the TextField, I am listening to the focus state, and triggering the onConfirmInput when focus is lost

modifier = Modifier
            .focusRequester(focusRequester)
            .onFocusChanged { state ->
                inFocus = state.hasFocus
                coroutineScope.launch {
                    delay(50)
                    if (!inFocus)
                        onConfirmInput()
                }
            },

I had to add the delay(50) because the focus state will trigger multiple times, and I can only get the latest if I wait a bit.

This is the output:

As you can see, the desired effect works with most of the elemnts, but not the bottom one, that will be overlapped by the IME.

enter image description here

MikkelT
  • 633
  • 1
  • 10
  • 16

1 Answers1

0

That's the common issue, here is a google issue tracker for that: https://issuetracker.google.com/issues/179203700

If you want to work it around, then you can add padding at the bottom of the list and then always scroll to the item that you have clicked. This way it will always jump to the top and the keyboard will stay opened.

Krzysztof S.
  • 91
  • 3