Hi everyone, I'm seeking for help using Focus on a...
# compose
r
Hi everyone, I'm seeking for help using Focus on a jetpack compose (In android). I have an Overlay that should be navegable with dpad actions, and some elements are being focus but others are not. My question is, what modifiers should have an element (Or it's parent) to be focusable by dpad? Main issue is happening with a LazyColumn that contains a few Texts inside it..That one does not even get the focus, however, a Button it is..
c
have you tried using the Google Search engine.? First output for me when searching for
compose focus
is https://developer.android.com/develop/ui/compose/touch-input/focus
also a search in this channel would have given plenty of results.
r
I've been reading all of this documentation but none of the tricks worked sadly :9
c
then it would make sense to post snippets of your code that work as expected. the answer to the question you have asked so far is the documentation.
r
So I have found the issue, is the clickable modifier, it stops the focus with dpad work but I don't know why
Copy code
private fun ButtonRowBody(
    isHovered: Boolean,
    isFocused: Boolean,
    interactionSource: MutableInteractionSource,
    text: String,
    showMicIcon: Boolean,
    enabled: Boolean,
    modifier: Modifier = Modifier,
    onClick: () -> Unit,
) {
    Box(modifier) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .padding(start = 8.dp)
                .height(80.dp)
                .fillMaxWidth()
                .clip(RoundedCornerShape(8.dp))
                .conditional(showMicIcon && (isHovered || isFocused), {
                    graphicsLayer { compositingStrategy = CompositingStrategy.Offscreen }
                        .background(color = White.copy(alpha = .12f))
                        .drawWithContent {
                            drawContent()
                            drawCircle(
                                color = White,
                                center = Offset(x = 0f, y = size.height / 2),
                                radius = 36f,
                                blendMode = BlendMode.DstOut
                            )
                        }
                })
                .conditional(!showMicIcon && (isHovered || isFocused), {
                    background(White.copy(alpha = 0.12f), RoundedCornerShape(8.dp))
                })
                .conditional(enabled.not(), {
                    background(White.copy(alpha = 0.40f), RoundedCornerShape(8.dp))
                })
                .clickable(
                    onClick = onClick,
                    indication = null,
                    interactionSource = interactionSource
                )
        ) {
            Spacer(modifier = Modifier.width(24.dp))
            Text(
                modifier = Modifier.align(Alignment.CenterVertically),
                textAlign = TextAlign.Start,
                text = text,
                color = White,
                style = TextStyle(
                    fontFamily = FontFamily(Font(R.font.circular_font_family)),
                    fontWeight = FontWeight(450),
                    fontSize = 24.sp,
                    lineHeight = 26.sp
                )
            )
        }
        if (showMicIcon)
            MicIcon(
                modifier = Modifier.align(Alignment.CenterStart)
            )
    }
}
a
what do u mean by it stops the focus
this might be related. had similar issues with focus and understanding of focus targets. tldr the docs are not as clear as they should be. this might explain things: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1739259028488919
r
In the end my problem was the .hoverable, I was using first parameter as isHover state boolean instead of isHoverable state, so it ws changing all the time..my bad.