I have a `BasicTextField` with width `IntrinsicSiz...

# compose

[Justin Xu]

I have a BasicTextField with width IntrinsicSize.min so that it's only ever as wide as the text inside. However, this causes the first letter to clip a little bit on the left side. Is there a way to fix that?

[Nthily]

can u share your code snippet? 😃

[Justin Xu]

BasicTextField(
        value = value,
        onValueChange = onValueChange,
        modifier = modifier
            .run {
                if (value == "" && placeholder == null)
                    width(IntrinsicSize.Min)
                else this
            }
            .indicatorLine(
                enabled = true,
                isError = false,
                interactionSource = interactionSource,
                colors = colors
            ),
        decorationBox = @Composable { innerTextField ->
            TextFieldDefaults.TextFieldDecorationBox(
                value = value,
                visualTransformation = VisualTransformation.None,
                innerTextField = innerTextField,
                placeholder = placeholder?.let {
                    {
                        H1Text(
                            text = it,
                            fontSize = fontSize,
                            color = AppTheme.colors.onPrimary,
                            maxLines = 1,
                            overflow = TextOverflow.Visible
                        )
                    }
                },
                singleLine = true,
                enabled = true,
                interactionSource = interactionSource,
                colors = colors,
                contentPadding = PaddingValues(AppTheme.dimensions.paddingSmall)
            )
        },
        textStyle = TextStyle(
            color = AppTheme.colors.onSecondary,
            fontFamily = AppTheme.typography.h1.fontFamily,
            fontSize = fontSize
        ),
        singleLine = true,
        cursorBrush = SolidColor(Color.White)
    )

[Nthily]

Is this your expected behavior?

Export-1714983009657.mp4

[Justin Xu]

Yes, does the text field itself just need some padding?

[Nthily]

no, even if you don't add padding, the text of the placeholder will not be cropped, it will just look very crowded.

But generally, for UI design, you usually will add padding

[Nthily]

val textState = rememberTextFieldState()
    BasicTextField(
      state = textState,
      decorator = {
        Box(
          modifier = Modifier
            .width(IntrinsicSize.Min)
            .clip(RoundedCornerShape(12.dp))
            .background(Color.Cyan, RoundedCornerShape(12.dp))
        ) {
          Box(
//            modifier = Modifier.padding(12.dp)
          ) {
            if (textState.text.isEmpty()) {
              Text(
                text = "this is placeHolder text",
                color = Color.Gray.copy(.5f),

                )
            }
            it()
          }
        }
      }
    )

all code here, i think IntrinsicSize.Min just apply to decorator, and decorator will receive a @Composable function, so you probably don't need to write your BasicTextField with TextFieldDefault from md3

[Justin Xu]

I changed decorationbox to

decorationBox = { innerTextField ->
    Box(
        modifier = Modifier
            .run {
                if (placeholder.isEmpty() || value.isNotEmpty())
                    width(IntrinsicSize.Min)
                else this
            }
            .background(AppTheme.colors.primary)
    ) {
        Box(modifier = Modifier.padding(AppTheme.dimensions.paddingMedium)) {
            if (value.isEmpty() && placeholder.isNotEmpty()) {
                H1Text(
                    text = placeholder,
                    fontSize = fontSize,
                    color = AppTheme.colors.onPrimary,
                    maxLines = 1,
                    overflow = TextOverflow.Visible
                )
            }
            innerTextField()
        }
    }
}

but the text is still cut off on the left.