https://kotlinlang.org logo
Join Slack
Powered by
hey there - how to set the focus on the first text...
# compose
j
hey there - how to set the focus on the first textfield.. I use mostly js/wasm version. The problem is that I tried with both LocalFocusManager and to move the focus nothign works and the focusBehaviour but I cant use it on load.. it has to be in a callback or launchEffect which is not great for on load event.
a
share code of what you tried
j
well one is
Copy code
LocalFocusManager.current.moveFocus(FocusDirection.Down)
which didnt do much
the other one is just seeting the focusBehaviour in LaunchedEffect 1 second after the composable is rendered.. this MAKES the textfield focused.. like it looks focused but you cant type ... it is just visual focus but not real focus :+)
a
AFAIK you need to pass a 
Modifier.focusRequester()
to your text field. and whenever you want it to be focused you do 
focusRequester.requestFocu()
Try this:
Copy code
Column {
    val focusRequester = remember { FocusRequester() }

    var value by remember { mutableStateOf("") }

    TextField(
        modifier = Modifier.focusRequester(focusRequester),
        value = value,
        onValueChange = {
            value = it
        }
    )

    Button(onClick = {
        focusRequester.requestFocus()
    }) {
        Text("Gain focus")
    }
}
j
well the thing is I want the textField to be on focus
since I have a lot of buttons on top
I want to skip all of them
and go straight to the textField with the focus taken'
so I tried something like that : val focusRequester = remember { FocusRequester() } var value by remember { mutableStateOf("") } TextField( modifier = Modifier.focusRequester(focusRequester), value = value, onValueChange = { value = it } ) Button(onClick = { }) { Text("Gain focus") } focusRequester.requestFocus() //will throw an exception which is expected
and then I tried doing it in LaunchedEffect with delay of 1000 ms
which marked it as focused
but it was not reallyt focused.
it showed and draws it with focus.. but you cant type
so the question is how to call this requestFocus on load : )
a
you call 
requestFocus()
inside a 
LaunchedEffect()
. remove the 
delay()
from it and it should do what you are asking
Copy code
Column {
        val focusRequester = remember { FocusRequester() }

        var value by remember { mutableStateOf("") }

        TextField(modifier = Modifier.focusRequester(focusRequester), value = value, onValueChange = {
            value = it
        })

        LaunchedEffect(Unit) {
            focusRequester.requestFocus()
        }
    }
just tried this on a jvm app and it focuses the text field when displayed, and you can just type
j
I was trying on js/wasm
only might be a bug in the wasm/js
interesting I will try again so this is the proper way
hm
indeed works on jvm , waiting the wasm build
on wasm it is shown as focused but doesnt work
strangely if I hit the button "TAB" few times it works.
a
I can't try rn but will later in the day. smells like a bug though
you can ask in #compose-web for js/wasm specifics in case anyone knows
j
Yea thanks :) sorry I didn’t try in jvm earlier
a
pro tip: always develop on jvm. it's the fastest platform you can run Compose Multiplatform and it's pretty stable overall. compose web is way too slow to do any fast passed development rn and it's still very experimental afaik
dev on jvm then test on compose web. then open bugs on the github repo so that the team fixes them ;P
j
To be fair I do mostly that on the jvm I can debug on web I can’t however on web I am using the -continuous build flag so it gets auto refreshed on change and is way faster if I want to look the layout since the preview is not yet working
e
Are you using a mobile browser? I think mobile is still missing some support.
j
no desktop / edge on macos
e
Maybe that's missing some support as well 😅
What version of CMP are you using?
j
2.0
1.6.10
e
Saw your issue report 👍
j
Yes thanks :)
271 Views
Open in Slack
PreviousNext
Powered by