How to control a menu programmatically in SwiftUI on macOS?

Question

I'm writing a ComboBox in SwiftUI on macOS and want to control it programmatically in a flexible way, rather than click on the button and the list shows.

I can use Menu to create a naive menu referring to Apple Developer - Menu, but cannot find any approach to programmatically control it, like showing or hiding its list.

Then I tried to custom one with a List like shown below. But when that list shows, it takes place and pushes other views down, which doesn't behave like a default system Menu that floating in front of following views.

VStack {
    TextField("Ttitle", text: $string) { isEditing in
        onEditing = isEditing
    }
    if onEditing { List(listItems, id:\.self) { Text($0) } }
}

It couldn't be better if there's a method like this, but it not exists.

SomeViewHere()
    .menu(isPresented: $showMenu) {
        Button("A") {}
        Button("B") {}
        Button("C") {}
    }

Also, I found a post here, but it only works on iOS.

I'm not familiar with AppKit, so I don't know if a solution exists there. But I'm also glad if AppKit works and willing to learn it. Anyway, I always prefer to use native SwiftUI. So, any ideas of how to achieve that?

[`NSCombobox` in an `NSViewRepresentable`](https://stackoverflow.com/questions/67956554/how-to-get-a-combobox-with-swiftui) is not an option? — vadian, Apr 02 '23 at 08:41
@vadian I tried those codes. But I don't think it's a good solution for me. First, it doesn't behave as I expected, it shows the list only when explicitly clicking on pull-down button. I wish it to show list when I'm editing (the "I" icon blinks). Second, it's not that "general" to be reused in other custom views with other behaviours. For example, to show that menu list when hovering on a view. — Yiming Designer, Apr 02 '23 at 09:34
You can’t control SwiftUI s menu you have to create your own — lorem ipsum, Apr 02 '23 at 10:09
@loremipsum I think so. But it doesn't behave correctly just using `VStack` as I mentioned in the post. Any idea of how to add this floating list? — Yiming Designer, Apr 03 '23 at 02:24

score 0 · Accepted Answer · answered Apr 03 '23 at 03:12

Referred to this post and this post, I figured out how to bring the floating list into life. An example custom one are shown below.

@State var showList: Bool = false

var body: some View {

    Button("Click Me") { showList.toggle() }
    .frame(width: 100, height: 20)
    .overlay {
        if showList {
            List {
                Button("AA") {}
                Button("AA") {}
                Button("AA") {}
            }
            .frame(width: 200, height: 300)
            .offset(y: 160)
        }
    }
    .zIndex(1)
    
    Text("Hello World")
    Circle().fill(.brown).frame(width: 50, height: 50)
}

How to control a menu programmatically in SwiftUI on macOS?

1 Answers1