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