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))
                )
        }
    }
}

Answer 1

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

Answer 2

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")
                }
            )
        }
    }
}