https://kotlinlang.org logo
Join Slack
Powered by
``` val mutableInteractionSource = ...
# compose
j
Copy code
val mutableInteractionSource = remember {
                    MutableInteractionSource()
                }
                val isFocused by mutableInteractionSource.collectIsFocusedAsState()
                val softwareKeyboard = LocalSoftwareKeyboardController.current
                LaunchedEffect(isFocused) {
                    if (isFocused) {
                        softwareKeyboard?.hide()
                    }
                }
                Column(
                    modifier = Modifier
                        .verticalScroll(rememberScrollState())
                        .focusable(interactionSource = mutableInteractionSource)
Is this a good way of hiding software keyboard when focus on a bottomsheet that is scrollable? Bottomsheet contains a list of input fields.
z
Please keep long code snippets to the thread.
We added a flag to not show the keyboard on focus to KeyboardOptions, does that work for you?
j
I thought this was short snippet, but sorry will shorten it further 🙂 Hmm not sure I follow, which flag in KeyboardOptions do you mean? I want to show the keyboard when focus on a input field, but when I go to another input field should ofc keep open, but when focus on something else outside any textfield, like focus on my bottomsheet I want to dismiss keyboard. One thing I did now was adding Done vs Next actions in keyboard actions/options, but like Done expecting to be used to send form data, and not close keyboard, if thats what you meant? Or is there more flags I have missed?
z
Are you sure there’s something in your bottom sheet that’s actually getting focus? If that thing is not a text field the keyboard should hide automatically. If it’s not, please file a bug
j
No, thats what I want help with understand. What should be focused, its like everything in bottomsheet should be focusable or well make so keyboard disappear if click outside keyboard. I got tip using this:
Copy code
@Composable
fun ClearFocusBox(modifier: Modifier = Modifier, content: @Composable () -> Unit) {
    val focusManager = LocalFocusManager.current
    Box(
        modifier.focusable().pointerInput(Unit) {
            detectTapGestures {
               focusManager.clearFocus(force = true)
            }
        },
    ) {
        content()
    }
}
But that doesnt work.
"Are you sure there’s something in your bottom sheet that’s actually getting focus? If that thing is not a text field the keyboard should hide automatically. If it’s not, please file a bug" Before doing that, whats expected here? Is. there any issues if using LazyLists, Modifier.verticalScroll when focusable elements, or something I need to instruct like Android vs iOS native to tell use this behaviour. Was a couple of changes with iOS with platform layers as of example in CMP 1.6.0-beta02, could potentially be problematic. In Android also some manifest things could add ime keyboard to resize things vs scrolling etc. Is there any guides about this, havent found any sample how I SHOULD do this the right way. Want to be sure I am doing things as they should behave or not.
As of example noticed if I click on another TextField while keyboard focus for another TextField, I first get Inactive and then Active again. That was kind of odd imo. I would expect delegating focus directly between two textfields, with FocusManager or whatever I should be using. I have no idea anymore, so many ways of doing focus request, bring into view, focus manager and a lot of Modifiers. What should I use?
z
I’m still not sure exactly what the UX you’re trying to achieve is. If your project is public can you send me a link, or else can you make a small reproducer?
j
Not public. Nothing special. Just a regular form inside a scrollable bottomsheet. Form is 10 questions.
z
If you’re reading LocalFocusManager from inside the bottom sheet, then calling clearFocus on it should hide the keyboard
Same with calling hide on the SoftwareKeyboardController
j
Yeah no problem programmatic hide keyboard. Problem its not happen automatic when click outside keyboard :)
z
That’s intended behavior on Android
j
Yeah but not in iOS
z
Ah, i missed that you were asking about iOS.
Might make sense to file a bug to jetbrains to support this behavior by default on iOS
But you should be able to get unconsumed pointer events in the Final pass to clear focus
j
Realize i never mentioned platform 🤣 But anyway I want solve all platforms. Currently iOS + Android.
z
I think that’s what was missing from the code snippet you posted, detectTap will use the main pass
j
What I did was adding keyboard ime done action allow iOS users close it from there at the moment.
My initial code also not the best. Easier using Modifier onFocusChanged :)
But quite happy having next vs done ime. And also implemented tab key to switch to next input field. That gives quite smooth experience. But Ah well hard get compose multiplatform with different expected UX with same ui code. I guess need if iOS code.
z
I would hope eventually compose for iOS would support the native behaviors automatically, but idk if that’s on JB’s roadmap
25 Views
Open in Slack
PreviousNext
Powered by