Any idea how I can prevent the first `j` in my Bas...

# compose

[Colton Idle]

Any idea how I can prevent the first j in my BasicTextField from being cut off? If you look closely, the jj has the starting part of the j that gets cutoff. Adjusting padding doesn't seem to fix it.

[Colton Idle]

For clarity

[Colton Idle]

its even more apparent when I use a custom font (like a cursive font)

[Colton Idle]

@Composable
fun EmailInputField() {
    var text by remember { mutableStateOf("") }

    BasicTextField(
        value = text,
        onValueChange = { text = it },
        textStyle = TextStyle(color = Color.Black),
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 24.dp)
            .padding(vertical = 2.dp)
            .background(Color.White)
            .padding(12.dp),
        decorationBox = { innerTextField ->
            Box(
                modifier = Modifier.fillMaxWidth()
            ) {
                if (text.isEmpty()) {
                    Text(
                        text = "Enter your email",
                        color = Color.Gray
                    )
                }
                innerTextField()
            }
        }
    )
}

[Colton Idle]

A bit more apparent if I put borders on

@Composable
fun EmailInputField() {
    var text by remember { mutableStateOf("") }

    BasicTextField(
        value = text,
        onValueChange = { text = it },
        textStyle = TextStyle(color = Color.Black),
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 24.dp)
            .padding(vertical = 2.dp)
            .background(Color.White)
            .padding(12.dp)
            .border(1.dp, Color.Green)
            .padding(12.dp)

        ,
        decorationBox = { innerTextField ->
            Box(
                modifier = Modifier.fillMaxWidth()
            ) {
                if (text.isEmpty()) {
                    Text(
                        modifier = Modifier.border(1.dp, Color.Blue),
                        text = "Enter your email",
                        color = Color.Gray
                    )
                }
                innerTextField()
            }
        }
    )
}

[Anastasia [G]]

Does this happen with the TextFieldState override too?

[Colton Idle]

After doing some more testing... this seems to happen even in xml? so i think its a non compose issue?

[hugo]

Running into this too today, looking at text measurement result, there's no indication of clipping, but deeper down in the private fields (on Android) there is a boring layout result that has a negative x offset. So it seems like the compose APIs are not exposing this which makes it hard to mitigate the issue, for example by setting text indent to force spacing on the first character of clipped as a workaround...

[hugo]

My use case might be slightly different, but same issue I think:

[Colton Idle]

funny coincidence. enjoy your twitch dj streams
I tried in an xml based app and I seemed to have the same issue. What if you try xml with your custom font. same issue?

[hugo]

Hah thanks 🙂 Haven't tried xml, but I can try it tomorrow for science. What I'm thinking as a workaround now is to add 0.5 em text indent (to make space) and then have a custom layout to move the textfield back by the same amount. Might have another issue then because with multi line the cursor position doesn't seem to be correct on the 2nd line blob shrug

[hugo]

Tested xml and it has the same issue; though I don't think that means compose should reproduce the same bug 😉

[hugo]

The hack using TextIndent seems to work for me, maybe you can get away with adding a tiny bit to adjust for the font you are using...

[Colton Idle]

yeah. i think @Siyamed has said that compose just re-uses all of the same text rendering stuff as xml so itll have the same bugs. I will have to try "text indent". i hadn't heard of it before!

[Anastasia [G]]

This is true but we can do some tweaks on Compose side (not always possible though), it's worth filing a bug anyway

[Colton Idle]

filed: https://issuetracker.google.com/issues/401226627