Search code examples
android-jetpack-composejetbrains-composecompose-desktop

LazyColumn does not scroll if using TextFields as child


@Composable
fun init() {
    LazyColumn(Modifier.fillMaxSize()) {
        for (i in 0..10) {
            item { Box(Modifier.padding(15.dp)) { TextField("Hallo$i", modifier = Modifier.fillMaxWidth(), onValueChange = {}) } }
        }
    }
}

If i have something simple as this list with textfields then the textfields will not let me scroll down the column. Only works if i scroll down next to the textfields. Tried also with readonly/disabled textfield.

is there a way to overcome this behaviour? maybe a way to disable focus on textfield if scrolled?

I am using jetbrains-compose for desktop version (0.5.0-build245) but can also be the same as in the jetpack-compose for android (did not try)


Solution

  • for the moment because i don't find any other solution i will use this workaround using a invisible box above the text field and change the state accordingly

    @Composable
    fun init() {
        LazyColumn(Modifier.fillMaxSize()) {
            for (i in 0..10) {
                item {
                    val isfocused = remember { mutableStateOf(false) }
                    val focusRequester = FocusRequester()
                    Box(Modifier.padding(15.dp)) {
                        TextField("Hallo$i", modifier = Modifier.fillMaxWidth().focusRequester(focusRequester).onFocusChanged {
                            isfocused.value = it.isFocused
                        }, onValueChange = {})
                        if (!isfocused.value)
                            Box(
                                modifier = Modifier
                                    .matchParentSize()
                                    .alpha(0f)
                                    .clickable(onClick = {
                                        isfocused.value = true
                                        focusRequester.requestFocus()
                                    }),
                               )
                    }
                }
            }
        }
    }