Any idea how to achieve mid-text-hints in text fie...

# compose

[Konstantin Klassen]

Any idea how to achieve mid-text-hints in text fields? Thought about having an annotated text where I mark the hint part and coerce the selection to prevent the hint to be selected, but in onValueChange all annotations and styles are stripped 🤷‍♂️

[brandonmcansh]

if you use BasicTextField you can get access to the decorationBox and add your own (im doing it for unfocused placeholders but have a similar plan to do the same)

[brandonmcansh]

BasicTextField(
            modifier = modifier
                .defaultMinSize(
                    minWidth = if (applyMinWidth) FKTextFieldDefaults.MinWidth else 0.dp,
                    minHeight = if (applyMinHeight) FKTextFieldDefaults.MinHeight else 0.dp,
                ).onFocusChanged { focused = it.isFocused },
            value = value,
            onValueChange = onValueChange,
            singleLine = singleLine,
            maxLines = maxLines,
            enabled = enabled,
            readOnly = readOnly,
            interactionSource = interactionSource,
            textStyle = mergedTextStyle,
            visualTransformation = visualTransformation,
            keyboardOptions = keyboardOptions,
            keyboardActions = keyboardActions,
            onTextLayout = onTextLayout,
            cursorBrush = SolidColor(colors.cursorColor(isError).value),
            decorationBox = { innerTextField ->
                OutlinedTextFieldDefaults.DecorationBox(
                    value = value.text,
                    visualTransformation = visualTransformation,
                    innerTextField = {
                        Box(contentAlignment = Alignment.CenterStart) {
                            placeholder()
                            innerTextField()
                        }
                    },
                    leadingIcon = leadingIcon,
                    trailingIcon = trailingIcon,
                    prefix = { },
                    suffix = { },
                    supportingText = { },
                    singleLine = singleLine,
                    enabled = enabled,
                    isError = isError,
                    interactionSource = interactionSource,
                    colors = colors.toTextFieldColors(),
                    contentPadding = contentPadding,
                    container = {
                        val borderStroke by animateBorderStrokeAsState(
                            enabled = enabled,
                            interactionSource = interactionSource,
                            isError = isError,
                            colors = colors,
                            focusedBorderThickness = MaterialTheme.dimens.thickBorder,
                            unfocusedBorderThickness = MaterialTheme.dimens.border,
                        )
                        val containerColor by colors.containerColor(
                            enabled,
                            isError,
                            interactionSource
                        )

                        Box(
                            modifier = Modifier
                                .border(border = borderStroke, shape = shape)
                                .background(color = containerColor, shape = shape)
                                .fillMaxSize()
                                .addIf(onClick != null) {
                                    Modifier.clip(shape)
                                        .clickable { onClick?.invoke() }
                                },
                        ) {
                            OutlinedTextFieldDefaults.ContainerBox(
                                enabled,
                                isError,
                                interactionSource,
                                colors.toTextFieldColors(),
                                shape
                            )
                        }
                    }
                )
            }
        )

[brandonmcansh]

decorationBox = { innerTextField ->
                OutlinedTextFieldDefaults.DecorationBox(
                    value = value.text,
                    visualTransformation = visualTransformation,
                    innerTextField = {
                        Box(contentAlignment = Alignment.CenterStart) {
                            placeholder()
                            innerTextField()
                        }
                    }

is the key part

[Konstantin Klassen]

Awesome thanks, with that I got at least something working but it also showed me the flaw of my idea: The hint is often clipped out of the viewport, when the text gets too long 🤦‍♂️

[brandonmcansh]

making the box use IntrinsicSize.Min may work?

[Konstantin Klassen]

I wanted to show a hint if the last char was a / . That means if the cursor already reached the width of the textfield and I type / , the hint would appear. But would I scroll to show the hint or let it be clipped? I think it was a bad UX idea from the start

[Konstantin Klassen]

But I learned about TextFieldDefaults.DecorationBox so that's something, thanks Brandon 😄

[brandonmcansh]

ahh

[brandonmcansh]

of course 🙂

[Zach Klippenstein (he/him) [MOD]]

I think this is something OutputTransformation could handle in upcoming BTF2