I have an *`OutlinedTextField`* where i want to display a different border modifier when it’s focus...

# compose

[Christoph Wiesner]

I have an OutlinedTextField where i want to display a different border modifier when it’s focused.
when chaining modifiers I get

IllegalStateException: Compose Runtime internal error. Unexpected or incorrect use of the Compose internal runtime API (Use active SlotWriter to determine anchor location instead)

(code in comment)

[Christoph Wiesner]

val defaultBorder = Modifier.border(
    width = 1.dp,
    color = Color.Blue,
    shape = RoundedCornerShape(15.dp)
)

val bigBorder = Modifier.roundedFocusBorderLight(16.dp)

var borderModifier by remember {
    mutableStateOf(defaultBorder)
}

OutlinedTextField(
    onValueChange = {},
    value = "",
    modifier = Modifier
        .then(borderModifier)
        .height(200.dp)
        .defaultMinSize(minHeight = 56.dp)
        .onFocusChanged {
            borderModifier =
                if (it.isFocused) bigBorder else defaultBorder
        },

    colors = TextFieldDefaults.outlinedTextFieldColors(
        focusedBorderColor = Color.Transparent,
        unfocusedBorderColor = Color.Transparent
    )
)

[Christoph Wiesner]

and this is the modifier that should be displayed on focus

@Stable
fun Modifier.roundedFocusBorderLight(cornerSize: Dp): Modifier = then(
    border(
        width = 2.dp,
        color = Color.Blue,
        RoundedCornerShape(cornerSize * 1.5f)
    )
        .padding(2.dp)
        .border(
            1.dp,
            color = Color.Green,
            RoundedCornerShape(cornerSize)
        )
)

[Anastasia Rozovskaya]

@Stable
fun Modifier.roundedFocusBorderLight(cornerSize: Dp): Modifier = composed {
    border(
        width = 2.dp,
        color = Color.Blue,
        RoundedCornerShape(cornerSize * 1.5f)
    )
        .padding(2.dp)
        .border(
            1.dp,
            color = Color.Green,
            RoundedCornerShape(cornerSize)
        )
}

changing then() to composed { } produces this behaviour

Screen Recording 2022-04-12 at 2.06.10 PM.mov

[Anastasia Rozovskaya]

Have a look at https://jorgecastillo.dev/composed-modifiers-in-jetpack-compose

[Anastasia Rozovskaya]

I’m not an expert, but you can use this approach as your starting point on a round to excellence with what you are trying to achieve. Hope this helps

[Christoph Wiesner]

thanks for the input!
composed is then not chaining them - resulting in a broken modifier, but maybe i find a working solution