SwiftUI: How to ignore taps on background when menu is open?

There's actually a perfectly valid and almost non-hacky mechanism to achieve this. But for some reason, Apple just didn't care to mention the possibility of such an approach in the docs, or leave breadcrumbs at the very least.

So what you would do is create a custom ButtonStyle to add a hook which would observe the Menu's state changes:

struct MenuStateTrackingButtonStyle: ButtonStyle {
    @Binding var menuOpen: Bool
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .onChange(of: configuration.isPressed) { _, newValue in
                withAnimation {
                    menuOpen = newValue
                }
            }
    }
}

Then you would create a menuOverlay to be able to actually react upon the user's gestures when Menu is open:

extension View {
    func menuOverlay(open: Bool, closeOnTap: @escaping () -> Void) -> some View {
        overlay {
            if open {
                Color.white
                    .opacity(0.001) // hack to make this view invisible yet valid for hit testing
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .onTapGesture {
                        closeOnTap()
                    }
            }
        }
    }
}

And use it like this:

@State private var isMenuOpen = false
...
var body: some View {
    contentView
        .menuOverlay(open: isMenuOpen) { isMenuOpen = false }
}

I would suggest to use this mechanism in the root view to account for nav bar, tab bar etc - ideally you'd probably want to disable the entire screen besides Menu when it's shown.

P.S. Not having to manually pass isMenuOpen as a Binding down the view hierarchy chain can be achieved with a few techniques, e.g. with environment values - utilizing custom EnvironmentKey with Binding as a value and passing it down via environment modifier, like so:

contentView.environment(\.menuOpen, $isMenuOpen)

We can thus optimize the solution to sth like that:

struct MenuStateTrackingButtonStyle: ButtonStyle {
    @Environment(\.menuOpen) var menuOpen
    ...
}

extension ButtonStyle where Self == MenuStateTrackingButtonStyle {
    static var menuStateTracking: MenuStateTrackingButtonStyle {
        MenuStateTrackingButtonStyle()
    }
}

And further simplify this mechanism usage by creating a dedicated Modifier

extension View {
    func menuDismissalOverlay() -> some View {
        modifier(MenuDismissalOverlayViewModifier())
    }
}

struct MenuDismissalOverlayViewModifier: ViewModifier {
    @State var isMenuOpen = false

    func body(content: Content) -> some View {
        content
            .overlay {
                if isMenuOpen { ... }
            }
            .environment(\.menuOpen, $isMenuOpen)
    }
}

Which on the client side will leave us to simply add

content
    ...
    .menuDismissalOverlay()

I think I have a solution, but it’s a hack… and it won’t work with the SwiftUI “App” lifecycle.

In your SceneDelegate, instead of creating a UIWindow use this HackedUIWindow subclass instead:

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {

        guard let windowScene = (scene as? UIWindowScene) else { return }
        
        let window = HackedWindow(windowScene: windowScene) // <-- here!
        window.rootViewController = UIHostingController(rootView: ContentView())
        self.window = window
        
        window.makeKeyAndVisible()
    }
}

class HackedUIWindow: UIWindow {
    
    override func didAddSubview(_ subview: UIView) {
        super.didAddSubview(subview)
        
        if type(of: subview) == NSClassFromString("_UIContextMenuContainerView") {
            if let rootView = self.rootViewController?.view {
                rootView.isUserInteractionEnabled = false
            }
        }
    }
    
    override func willRemoveSubview(_ subview: UIView) {
        super.willRemoveSubview(subview)
        
        if type(of: subview) == NSClassFromString("_UIContextMenuContainerView") {
            if let rootView = self.rootViewController?.view {
                rootView.isUserInteractionEnabled = true
            }
        }
    }
}

The subclass watches for subviews being added/removed, looking for one of type _UIContextMenuContainerView that’s used by context menus. When it sees one being added, it grabs the window’s root view and disables user interaction; when the context menu is removed, it re-enables user interaction.

This has worked in my testing but YMMV. It may also be wise to obfuscate the "_UIContextMenuContainerView" string so App Review doesn’t notice you referencing a private class.

You can have the behavior you want by using a Form or a List instead of a "plain view". All buttons will then be disabled by default when the menu is on screen, but they need to be buttons, and only one per cell, it won't work with a tapGesture because what you are actually doing is tapping on the cell, and SwiftUI is disabling TableView taps for you.

The key elements to achieve this are:

• Use a Form or a List
• Use an actual Button. In your example you use a Rectangle with a tapGesture.

I modified the code you provided and if you open the menu you can't hit the button:

struct SwiftUIView: View {

    @State private var toggle: Bool = true

    var body: some View {
        VStack {
            Spacer()
            if toggle {
                Text("on")
            } else {
                Text("off")
            }
            Spacer()
            
            /// We add a `List` (this could go at whole screen level)
            List {
                /// We use a `Button` that has a `Rectangle`
                /// rather than a tapGesture
                Button {
                    toggle.toggle()
                } label: {
                    Rectangle()
                        .frame(height: 200)
                }
            }
            .listStyle(.plain)
            .frame(height: 200)
            
            Spacer()
            Menu("Actions") {
                Button("Duplicate", action: { toggle.toggle() })
                Button("Rename", action: { toggle.toggle() })
                Button("Delete", action: { toggle.toggle() })
            }
            Spacer()
        }
    }
}

It's not amazing, but you can manually track the menu's state with a @State var and set this to true in the .onTap for the Menu.

You can then apply .disabled(inMenu) to background elements as needed. But you need to ensure all exits out of the menu properly set the variable back to false. So that means a) any menu items' actions should set it back to false and b) taps outside the menu, incl. on areas that technically are "disabled" also need to switch it back to false.

There are a bunch of ways to achieve this, depending on your view hierarchy. The most aggressive approach (in terms of not missing a menu exit) might be to conditionally overlay a clear blocking view with an .onTap that sets inMenu back to false. This could however have Accessibility downsides. Optimally, of course, there would just be a way to directly bind to the menu's presentationMode or the treatment of surrounding taps could be configured on the Menu. In the meantime, the approach above has worked ok for me.

I was able to resolve this by not using .onTapGesture and wrapping my List item within a Button. This can be further improved by converting to a view modifier.

List {
  Section {
    view.tappable {
      // do something
    }
  }
}

struct TappableModifier: ViewModifier {
    // use this over onTapGestures to resolve tap conflicts when dismissing context menus
    var action: () -> Void
    
    func body(content: Content) -> some View {
        Button {
            action()
        } label: {
            content
        }
    }
}

extension View {
    public func tappable(action: @escaping () -> Void) -> some View {
        ModifiedContent(content: self, modifier: TappableModifier(action: action))
    }
}