I came across this situation , I have ScrollableCo...

# compose

[Chethan]

I came across this situation , I have ScrollableColumn and having many clickable items , along with a Textfield.  editing textfield and dismissing emulator keypad leading into a situation where I unable to click exact button, it takes input some where else, Although buttons are clickable, it takes click some where else . I am afraid I am the only one facing this ?

I am guessing that TextField function recomposing under ScrollableColumn, it could be the case where the position of other views on the screen got changed every time TextField recomposes under scrollable column. Could you help here ? below is complete code to reproduce

import androidx.compose.foundation.ScrollableColumn
import androidx.compose.foundation.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.selection.selectable
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.ripple.RippleIndication
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.ui.tooling.preview.Preview

@Preview
@Composable
fun Preview() {
    ScrollableColumn(modifier = Modifier.fillMaxWidth().background(Color.DarkGray)) {
        (1..10).forEach {
            Button(50.dp, 16)
        }

        var text = remember { mutableStateOf("") }
        OutlinedTextField(
            value = text.value,
            keyboardType = KeyboardType.Text,
            onValueChange = { text.value = it },

            )
    }
}

@Composable
fun Button(buttonSize: Dp, fontSize: Int) {
    Row(
        modifier = Modifier.wrapContentWidth().wrapContentHeight().padding(top = 10.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {

        val toggleIndex = remember { mutableStateOf(0) }
        (1..5).forEach { index ->
            val isSelected = toggleIndex.value == index

            Box(
                modifier = Modifier
                    .border(
                        1.dp,
                        color = if (isSelected) Color.Black else Color.White,
                        CircleShape
                    )
                    .background(
                        color = if (isSelected) Color.Black else Color.White,
                        shape = CircleShape
                    )
                    .selectable(
                        enabled = true,
                        selected = true,
                        onClick = { toggleIndex.value = index },
                        indication = RippleIndication(bounded = true, radius = 24.dp)
                    ).preferredSize(buttonSize)
            ) {

                Text(
                    text = index.toString(),
                    style = TextStyle(
                        color = if (isSelected) Color.White else Color.Black,
                        fontSize = fontSize.sp,
                        textAlign = TextAlign.Center
                    ),
                    modifier = Modifier.align(Alignment.Center)

                )
            }

            Spacer(modifier = Modifier.width(10.dp))
        }
    }
}

Screen_recording.mov

[tieskedh]

It works on my emulator...
On my physical device, buttons work, but I can't do multiline...

[jim]

cc @Siyamed

[Chethan]

Hi @tieskedh , Really ..! The issue arises when you type some thing on Textfield , then dismiss the emulator keypad and then start clicking buttons, You will notice click is taken to some where else . I will also check confirm with other emulators and physically device

[Chethan]

I just made quick check on the other emulators and Physical device , issue still persists , I have tested on emulator Pixel - 4 API level 30, Pixel XL API 30 , Physical device used - Motorole one power , OS level 10

Compose version userd - 1.0.0-alpha04

[Chethan]

I have made ticket here - https://issuetracker.google.com/issues/171516608

[bharat to]

This happened to me in alpha04 and solved by updating to alpha05