How to combine contextMenu & RoundedRectangle?

I am trying to create a list of not rectangular elements, each of which has a context menu. However, I am encountering an issue with the corners when performing a long press.

What is the correct way to use such a combination? I don't want to use List because of its default styling. The issue takes place only while animation is in progress.

Here's a simplified code example that can be copied pasted and ran in one file. The video was recorded on the device with iOS 18.2

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene { WindowGroup { TestView() } }
}

struct TestView: View {
    let items = ["Item 1", "Item 2", "Item 3"]
    var body: some View {
        VStack {
            ForEach(items, id: \.self) { item in
                HStack {
                    Text(item)
                    Spacer()
                    Image(systemName: "star")
                }
                .padding()
                .background(.yellow)
                // tried all these in different combinations, none works
                .contentShape(RoundedRectangle(cornerRadius: 10))
                .clipShape(RoundedRectangle(cornerRadius: 10))
                .containerShape(RoundedRectangle(cornerRadius: 10))
                .contextMenu {
                    Button { print("Edit \(item)") }
                    label: { Text("Edit"); Image(systemName: "pencil") }
                }
            }
        }
        .padding()
    }
}

#Preview {
    TestView()
}
Answered by routern in 819130022

Seems like I need to use

.contentShape(.contextMenuPreview, RoundedRectangle(cornerRadius: 10))

This way it looks good

Accepted Answer

Seems like I need to use

.contentShape(.contextMenuPreview, RoundedRectangle(cornerRadius: 10))

This way it looks good

How to combine contextMenu & RoundedRectangle?
 
 
Q