A modern programming language that makes developers happier.

kotlinlang

Hello guys, I am trying to implement TextField using `BasicTextField` and I want the content of the TextField to be highlighted when it receives focus.  I am familiar with how to do it in XML but the I am stuck on how to implement it in compose. I'll appreciate any help. Thanks

Funny. I asked almost the same question here <https://kotlinlang.slack.com/archives/C01D6HTPATV/p1682336482639329> just a couple of minutes earlier :wink:.

test-focus.mp4

I think you could achieve this with `TextFieldValue` and observing `InteractionSource` :
```var value by remember { mutableStateOf(TextFieldValue("")) }

val interactionSource = remember { MutableInteractionSource() }
LaunchedEffect(interactionSource) {
    interactionSource.interactions.collect {
        if (it is FocusInteraction.Focus) {
            val textSize = value.text.length
            value = value.copy(selection = TextRange(0, textSize))
        }
    }
}

BasicTextField(
    value = value,
    onValueChange = { value = it },
    interactionSource = interactionSource,
)```

<@U01K2T6RZK2> Thanks. But the issue is that, if I use `focusRequester.requestFocus()`, it highlights. However, tapping on the textfield does not hightlight it

Huh, strange.
Does your field is already focused when you tap on it? In that case it will not receive FocusInteraction I guess :thinking_face:

I have forgot that `onFocusChanged` modifier exists, which was recommended <https://kotlinlang.slack.com/archives/C01D6HTPATV/p1682348141514589?thread_ts=1682336482.639329&amp;cid=C01D6HTPATV|here>. Could you try it if it will work in your case?

Thanks a lot <@U01K2T6RZK2> The initial solution worked but then, if input is selected, I cannot move the cursor as it is stuck at the start position

&gt; move the cursor
Do you mean to un-focus the input field?
Or move it with drag-n-drop?

To un-focus I have used custom modifier on outer Box:
```fun Modifier.clearFocusOnTap(): Modifier = composed {
    val focusManager = LocalFocusManager.current
    Modifier.pointerInput(Unit) {
        detectTapGestures(
            onTap = { focusManager.clearFocus() }
        )
    }
}```
Like this:
```Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier
        .fillMaxSize()
        .imePadding()
        .clearFocusOnTap()
) {
    ...
}```
But moving with drag-n-drop works fine for me, see the video.

<@U01K2T6RZK2> I finally got it right thanks to you.