Elevation shadow and rounded corners disappear when animated

Question

I am building my own drop down menu using a Surface composable and AnimateVisibility to expand and shrink it vertically. The problem is that, when it does either, the elevation shadows disappear as well as the rounded corners. Instead, there are right-angled shadows that appear on each corner (which is not the intention). How can I keep the drop down looking the same as when it is not animated?

AnimatedVisibility(
            visible = expanded,
            enter = expandVertically(animationSpec = tween(2000)),
            exit = shrinkVertically(animationSpec = tween(2000))
        ) {
            DropDown(
                modifier = Modifier
                    .width(searchBarSize.dp),
                list = suggestions,
                suggestion = suggestionItem
            )
        }

@Composable
fun <T> DropDown(
    modifier: Modifier,
    list: List<T>,
    suggestion: @Composable (T, Boolean) -> Unit
) {
    Surface(
        shape = RoundedCornerShape(20.dp),
        elevation = 10.dp,
        modifier = modifier
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            list.forEachIndexed { index, it ->
                suggestion(it, index == list.size - 1)
            }
        }
    }
}

Answer 1

So, I am not sure if this will help, but you hardcoded width. If you add some padding, so it can drop shadow I think you will have desired behavior.

DropDown(
    modifier = Modifier
        .padding(20.dp)
        .width(120.dp),
    list = mutableList,
    suggestion = { a, b ->
        Text(text = a)
    }
)

It works for me: