How to show BasicTextField trailing icon right after text in Jetpack compose

Question

How to show BasicTextField trailing icon right after text in Jetpack compose. My example shows icon at the and of the row, with big space between text and trailingIcon

BasicTextField(
                    value = selectedText,
                    onValueChange = { extendedView = false },
                    readOnly = true,
                    textStyle = MaterialTheme.typography.bodyMedium,
                    modifier = Modifier
                        .fillMaxSize()
                        .wrapContentHeight()
                        .menuAnchor()

                ) {
                        TextFieldDefaults.TextFieldDecorationBox(
                            value = selectedText,
                            innerTextField = it,
                            singleLine = true,
                            enabled = false,
                            visualTransformation = VisualTransformation.None,
                            trailingIcon = {
                                Image(
                                    painter = painterResource(id = LocalAppResources.current.arrowDown),
                                    contentDescription = "Arrow down",
                                    contentScale = ContentScale.None,
                                    alignment = Alignment.Center
                                )
                            },
                            placeholder = { account.name },
                            interactionSource = remember { MutableInteractionSource() },
                            contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
                                top = 2.dp, bottom = 2.dp, start = 6.dp, end = 0.dp
                            ),
                            colors = TextFieldDefaults.textFieldColors(
                                containerColor = Color.Transparent,
                                unfocusedIndicatorColor = Color.Transparent,
                                disabledIndicatorColor = Color.Transparent
                            ),
                        )
                    }
                }

Answer 1

You can try out this

Preview

Code

@Preview
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Stack032() {

    val searchTextFieldValue =
        remember { mutableStateOf(TextFieldValue()) }

    BasicTextField(
        modifier = Modifier
            .wrapContentSize(),
        value = searchTextFieldValue.value,
        onValueChange = { newText ->
            searchTextFieldValue.value = newText
        },
        decorationBox = { innerTextField ->
            TextFieldDefaults.DecorationBox(
                value = searchTextFieldValue.value.text,
                innerTextField = {
                    innerTextField()
                },
                enabled = true,
                singleLine = true,
                visualTransformation = VisualTransformation.None,
                interactionSource = remember { MutableInteractionSource() },
                trailingIcon = {
                    Icon(imageVector = Icons.Filled.Close,
                        contentDescription = "search",
                        modifier = Modifier.clickable {
                            searchTextFieldValue.value = TextFieldValue("")
                        })
                },
                contentPadding = PaddingValues(0.dp),
            )
        },
    )
}