Why doesn't UIVisualEffectView work in SwiftUI context menus? - ios

Question

I have a relatively simple view, and I am trying to get UIVisualEffectView to work when used within a context menu.
struct ContentView: View {
var body: some View {
ZStack(alignment: .bottomLeading) {
Image("Flower")
.resizable()
.frame(width: 200, height: 200)
VStack {
Text("Line 1")
Text("Line 2")
}
.frame(width: 200, height: 50)
.background(BlurView())
}
.contextMenu(ContextMenu(menuItems: {
Text("Menu Item 1")
}))
}
}
struct BlurView: UIViewRepresentable {
var style: UIBlurEffect.Style = .systemMaterial
func makeUIView(context: Context) -> UIVisualEffectView {
return UIVisualEffectView(effect: UIBlurEffect(style: style))
}
func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
uiView.effect = UIBlurEffect(style: style)
}
}
When the view loads it works great, but when the context menu is activated the whole blur just disappears.
Hopefully there's a workaround or I'll just have to use a completely different overlay until this is fixed.

Answer 1

This is the way how the contextMenu interferes with the underlying view.
If you don't want this behaviour, you can attach the contextMenu to an invisible overlay, so the underlying view will remain untouched:
struct ContentView: View {
var body: some View {
ZStack(alignment: .bottomLeading) {
Image("testImage")
.resizable()
.frame(width: 200, height: 200)
VStack {
Text("Line 1")
Text("Line 2")
}
.frame(width: 200, height: 50)
.background(BlurView())
}
.overlay(
Color.clear
.contentShape(Rectangle())
.contextMenu(ContextMenu(menuItems: {
Text("Menu Item 1")
}))
)
}
}