DropdownMenu in Jetpack Compose

I have a problem about DropdownMenu. When I click the Morevert Icon, the menu opens on the left, I want it to open on the right. I have a TextField (weight=6f) and Morevert Icon (weight=1f) in a Row. I don't understand why it opens on the left. Thanks for any help.

Here is my code:

@Composable
fun HistorySearchBar(
    text: String,
    onTextChange: (String) -> Unit,
    onCloseClicked: () -> Unit,
    onSearchClicked: (String) -> Unit
) {
    val focusRequester = remember { FocusRequester() }
    val focus = remember { mutableStateOf(false) }
    var showMenu by remember { mutableStateOf(false) }
    val inputService = LocalTextInputService.current

    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .height(56.dp),
        elevation = AppBarDefaults.TopAppBarElevation,
        color = MaterialTheme.colors.primary
    ) {
        Row(modifier = Modifier.fillMaxWidth()) {
            TextField(
                modifier = Modifier.weight(6f)
                    .focusRequester(focusRequester)
                    .onFocusChanged {
                        if (focus.value != it.isFocused) {
                            focus.value = it.isFocused
                            if (!it.isFocused) {
                                onTextChange("")
                                inputService?.hideSoftwareKeyboard()
                            }
                        }

                },
            value = text,
            onValueChange = {
                onTextChange(it)
            },
            placeholder = {
                Text(
                    modifier = Modifier.alpha(ContentAlpha.medium),
                    text = "Search in History...",
                    color = Color.White
                )
            },
            textStyle = TextStyle(
                fontSize = MaterialTheme.typography.subtitle1.fontSize
            ),
            singleLine = true,
            trailingIcon = {
                if(text.isNotEmpty()) {
                    IconButton(
                        onClick = {
                            if (text.isNotEmpty()) {
                                onTextChange("")
                            } else {
                                onCloseClicked()
                            }
                        }) {
                        Icon(
                            imageVector = Icons.Default.Close,
                            contentDescription = "Search Icon",
                            tint = Color.White
                        )
                    }
                }}
            ,
            keyboardOptions = KeyboardOptions(
                imeAction = ImeAction.Search
            ),
            keyboardActions = KeyboardActions(
                onSearch = {
                    onSearchClicked(text)
                }
            ),
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent,
                cursorColor = Color.White.copy(alpha = ContentAlpha.medium)
            )
        )
        IconButton(onClick = { showMenu = !showMenu}, modifier = Modifier.weight(1f)) {
            Icon(Icons.Default.MoreVert, "")
        }

        DropdownMenu(
            expanded = showMenu,
            onDismissRequest = { showMenu = false }) {
            DropdownMenuItem(onClick = { }) {
                Text(text= "Clear All History")
            }
        }
    }
}

}

Solution 1:

A DropdownMenu behaves similarly to a Popup, and will use the position of the parent layout to position itself on screen. Commonly a DropdownMenu will be placed in a Box with a sibling that will be used as the 'anchor'.

Currently the parent of DropdownMenu is the Surface whose position is upper-left corner.

You can move DropdownMenu() in the IconButton(); or even better wrap both DropdownMenu() and IconButton() in a Box(). Dropdown menu will use the box's position to calculate it's own position and IconButton will act as an anchor.

@Composable
fun HistorySearchBar(
    text: String,
) {
    var showMenu by remember { mutableStateOf(false) }
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .height(56.dp),
        elevation = AppBarDefaults.TopAppBarElevation,
        color = MaterialTheme.colors.primary
    ) {
        Row(modifier = Modifier.fillMaxWidth()) {
            TextField(...
            )
            Box(modifier = Modifier.weight(1f)){
                IconButton(onClick = { showMenu = !showMenu }) {
                    Icon(Icons.Default.MoreVert, "")
                }
                DropdownMenu(
                    expanded = showMenu,
                    onDismissRequest = { showMenu = false }) {
                    DropdownMenuItem(onClick = { }) {
                        Text(text = "Clear All History")
                    }
                }
            }
        }
    }
}