Changing TextField's placeholder (hint) direction doesn't work

Question

I have the following composable -

Column(
        modifier = modifier
            .fillMaxSize()
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentSize(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            TextField(
                modifier = Modifier
                    .weight(1f),
                colors = TextFieldDefaults.colors(
                    focusedContainerColor = getColorFromViewSystem(color = R.attr.colorSecondary),
                    unfocusedContainerColor = getColorFromViewSystem(color = R.attr.colorSecondary)
                ),
                textStyle = LocalTextStyle.current.copy(
                    textDirection = TextDirection.Content,
                ),
                value = searchTerm,
                onValueChange = { searchTerm ->
                    onSearchTermChanged(searchTerm)
                },
                placeholder = {
                    Text(
                        modifier = Modifier.weight(1f),
                        text = stringResource(id = R.string.search_hint),
                        textAlign = TextAlign.End
                    )
                }
            )
//          more composables...

        }
//      more composables...
    }

As you can see, on my placeholder variable (equivalent to hint at XML), I have a Text that I am trying to make it aligned to the end of my Text but it doesn't work. I am using RTL language if that matters, and here is the result -

My goal that the hint will move to the left side. What am I missing?

Answer 1

To achieve this behavior, you can use TextDirection from TextStyle. So changing the code it would like this:

placeholder = {
    Text(
        modifier = Modifier.fillMaxWidth(),
        text = "Hint",
        style = TextStyle(
            textDirection = TextDirection.Rtl
        ),
        textAlign = TextAlign.End
    )
}

Note that there's also TextDirection.ContentOrRtl, as per documentation Rtl will always enable this behavior while ContentOrRtl will enable RTL when it detects RTL text on first character, so depending on your usecase you may prefer ContentOrRtl.

TextDirection.ContentOrRtl Doc:

This value indicates that the text direction depends on the first strong directional character in the text according to the Unicode Bidirectional Algorithm. If no strong directional character is present, then Right to Left will be used as the default direction.