Jetpack Compose. How to scroll to specific BasicTextField?

230 Views Asked by At

I'm trying to implement custom keyboard. This keyboard must be app-specific and I try to build it into your UI rather than pushing it out to a generic IME. So I need to manually track if the input field has received focus and need to show my custom keyboard and scroll to the input field.

Here is structure of my screen():

    Box {
    
      var hasFocus by remember { mutableStateOf(false) }
      val padding = if (hasFocus) 220.dp else 0.dp // 220.dp is keyboard height
      
    
     Content( modifier = Modifier
                                .fillMaxWidth()
                                .verticalScroll(scrollState)
                                .padding(bottom = padding),
             onChangeFocus = { hasFocus = it }, 
)
    
     if(hasFocus) { 
       MyCustomKeyboard(modifier = Modifier.align(Alignment.BottomCenter))
    }
    
   } 

Now I need to calculate the position of the input field if it has received focus and scroll to it. Here is my code:

InputTextField(
            modifier = modifier.onGloballyPositioned { coordinates ->
                scrollToPosition = (scrollState.value + coordinates.positionInRoot().y)
            }.onFocusChanged { focusState ->
                if (focusState.isFocused) {
                    coroutineScope.launch {
                        scrollState.animateScrollTo(scrollToPosition.toInt())
                    }
                }
            },

As a result, I scroll incorrectly, I would like the text input field to be located above my keyboard when receiving focus, but it scrolls in such a way that it is somewhere at the top of the screen. What am I doing wrong ? Please help me fix this

0

There are 0 best solutions below