Phone keyboard doesn't popup when I click on TextField Compose in DialogFragment

Question

Below is the code for custom TextField. I have used TextField in Fragment and DialogFragment. I am having some issues while using it in DialogFragment. The phone keyboard opens when I click on the TextField below when it is used in Fragment. But even though it focuses on the TextField, the keyboard doesn't pop up when it is used in DialogFragment.

fun MyTextFiled(
    search: (String) -> Unit,
    query: String?
) {
    var state by rememberSaveable { mutableStateOf(query) }
    Card(
        shape = RoundedCornerShape(dimensionResource(id = R.dimen.padding_5dp)),
    ) {
        Row(
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.height(36.dp).background(colorResource(id = R.color.background_wallet_searchView)),
        ) {
            Icon(
                painter = painterResource(id = R.drawable.ic_new_search),
                contentDescription = null,
                modifier = Modifier
                    .size(20.dp)
                    .padding(start = dimensionResource(id = R.dimen.padding_5dp)),
                tint = colorResource(id = R.color.text_secondary),
            )
            BasicTextField(
                value = state?:"",
                onValueChange = {
                    search.invoke(it)
                    state = it
                },
                maxLines = 1,
                modifier = Modifier
                    .weight(1F)
                    .align(Alignment.CenterVertically)
                    .padding(horizontal = dimensionResource(id = R.dimen.padding_5dp)),
                singleLine = true,
                textStyle = TextStyle(
                    color = colorResource(id = R.color.text_secondary),
                    fontSize = 13.sp,
                    fontStyle = MaterialTheme.typography.overline.fontStyle
                ),
                keyboardOptions = KeyboardOptions.Default.copy(
                    capitalization = KeyboardCapitalization.Sentences,
                    autoCorrect = true,
                    keyboardType = KeyboardType.Number,
                    imeAction = ImeAction.Search
                ),
                decorationBox = { innerTextField ->
                    if (state.isNullOrEmpty()) {
                        Text(
                            text = stringResource(id = R.string.search),
                            style = MaterialTheme.typography.overline,
                            fontSize = 12.sp,
                            color = colorResource(id = R.color.text_secondary)
                        )
                    }
                    innerTextField()
                }
            )
            if (!state.isNullOrEmpty())
                Icon(
                    painter = painterResource(id = R.drawable.round_close_24),
                    contentDescription = null,
                    modifier = Modifier
                        .clickable {
                            state = ""
                            search.invoke("")
                        }
                        .size(20.dp)
                        .padding(end = dimensionResource(id = R.dimen.padding_5dp))
                )
        }
    }
}

Could you use keyboardOptions like this link does: https://stackoverflow.com/a/66482474/13083841 — mrzbn, Jul 03 '22 at 15:37
This seems to have been fixed in compose 1.4.0 alpha. However, the keyboard pops up under the `DialogFragment` such that keypresses are not detected! — Mark, Jan 22 '23 at 03:11

score 0 · Answer 1 · edited Jul 04 '22 at 14:21

MessageScreen:

@Composable
fun MessageScreen(
    messagesViewModel: MessagesViewModel,
    navHostController: NavController,
    sharedViewModel: SharedViewModel
) {
    val listState = rememberLazyListState()

    // Set State of Message Screen
    val receiverProfile = sharedViewModel.receiverProfile
    val senderProfile = sharedViewModel.senderProfile
    Log.d("TAG", "MessageScreen: RECEIVER = $receiverProfile  SENDER = $senderProfile")

    // Get All Messages from Firebase
    messagesViewModel.getAllMessageFromFirebase(receiverProfile, senderProfile)

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween,
    ) {

        TopBar(
            title = receiverProfile!!.displayName,
            buttonIcon = painterResource(id = R.drawable.ic_back_arrow_back_24)
        ) {
            navHostController.popBackStack()
        }

        Box(modifier = Modifier.weight(10f)) {
            LazyColumn(
                modifier = Modifier
                    .fillMaxWidth(),
                verticalArrangement = Arrangement.Top,
                state = listState
            ) {

                items(items = messagesViewModel.allMessagesState) { message ->

                    MessageCard(message = message, sharedViewModel = sharedViewModel)
                    Log.d("TAG 14", message.toString())
                }
                CoroutineScope(Dispatchers.Main).launch {
                    if (messagesViewModel.allMessagesState.isNotEmpty()) {
                        listState.scrollToItem(messagesViewModel.allMessagesState.size - 1)
                    }
                }
            }
        }
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp), contentAlignment = Alignment.Center
        ) {
            SendMessageCard(messagesViewModel, sharedViewModel)
        }

    }
}
`

**SendMessageCard :-**
@Composable
fun SendMessageCard(messagesViewModel: MessagesViewModel, sharedViewModel: SharedViewModel) {

    Card(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight(),
        elevation = 8.dp
    ) {
        Row(
            modifier = Modifier,
            horizontalArrangement = Arrangement.SpaceAround
        ) {
            OutlinedTextField(
                value = messagesViewModel.textState.value,
                onValueChange = {
                    messagesViewModel.textState.value = it
                },
                modifier = Modifier.fillMaxWidth(),
                keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),

                trailingIcon = {
                    IconButton(onClick = {
                            messagesViewModel.sendMessage(
                                message = Message(
                                    messagesViewModel.textState.value,
                                    Timestamp.now(),
                                    sharedViewModel.senderProfile!!.mailId
                                ),
                                sharedViewModel = sharedViewModel
                            )
                    }) {
                        Icon(imageVector = Icons.Filled.Send, contentDescription = "Send Message")
                    }
                },
                textStyle = TextStyle(fontSize = 20.sp),
                label = {
                    Text(text = "Type Message")
                }
            )
        }
    }
}

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jul 05 '22 at 03:16

score -1 · Accepted Answer · answered Jul 24 '22 at 12:12

-1

I figured out the solution to my problem. I used Dialog Compose inside Dialog Fragment and the keyboard popped up.

answered Jul 24 '22 at 12:12

Leila_ygb

51
4

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 26 '22 at 06:20
So what do you return in `onCreateDialog`? Surely not a non-compose `Dialog`? – Mark Jan 21 '23 at 12:45
2

Here you can find possible workaround (BottomSheetDialogFragment can be replaced with DialogFragment): https://issuetracker.google.com/issues/262140644#comment7 – KLM Mar 09 '23 at 10:21

Phone keyboard doesn't popup when I click on TextField Compose in DialogFragment

2 Answers2