SwiftUI: Why is the overflow menu in the toolbar empty?

Question

In iPadOS 16.1 the following code will produce a menu button if the available space is too small. It can not be opened though. Am I doing something wrong? I am trying to reproduce what is explained in "SwiftUI on iPad: Add toolbars, titles, and more" from WWDC22 about three minutes into the video.

NavigationStack {
    VStack {
        Image(systemName: "globe")
            .imageScale(.large)
            .foregroundColor(.accentColor)
        Text("Hello, world!")
    }
    .navigationTitle("Where are the Overflow Menu items?")
    .navigationBarTitleDisplayMode(.inline)
    .toolbarRole(.editor)
    .toolbar {
        ToolbarItemGroup(placement: .secondaryAction) {
            ImageButton(imageName: "person.fill.questionmark")
            ImageButton(imageName: "person.crop.circle.badge.questionmark.fill")
            ImageButton(imageName: "questionmark.app.fill")
            ImageButton(imageName: "questionmark")
            ImageButton(imageName: "questionmark.diamond")
            
            ImageButton(imageName: "person.fill.questionmark")
            ImageButton(imageName: "person.crop.circle.badge.questionmark.fill")
            ImageButton(imageName: "questionmark.app.fill")
            ImageButton(imageName: "questionmark")
            ImageButton(imageName: "questionmark.diamond")
        }
    }
    .padding()
}

This is what it looks like.

Edit I now spotted this log message when one click the menu button:

[UILog] Called -[UIContextMenuInteraction updateVisibleMenuWithBlock:] while no context menu is visible. This won't do anything.

Are you able to attach an image of the problem? If yes, please do! — Timmy, Nov 25 '22 at 10:43
Added an image an changed the description. I am actually not sure if the menu is empty, because there might be items there if you manage to open it. — Johan Jonasson, Nov 25 '22 at 12:24

score 1 · Accepted Answer · answered Dec 07 '22 at 09:17

I replaced your image button to normal button because don't have the image button definition. I tried below code and it's working.

var body: some View {
    
    NavigationStack {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .navigationTitle("Where are the Overflow Menu items?")
        .navigationBarTitleDisplayMode(.inline)
        .toolbarRole(.editor)
        .toolbar {
            ToolbarItemGroup(placement: .secondaryAction) {
                            Button("First") {
                                print("Pressed")
                            }

                            Button("Second") {
                                print("Pressed")
                            }
                Button("Second") {
                    print("Pressed")
                }
                Button("Second") {
                    print("Pressed")
                }
                Button("Second") {
                    print("Pressed")
                }
                Button("Second") {
                    print("Pressed")
                }
                Button("Second") {
                    print("Pressed")
                }
                Button("Second") {
                    print("Pressed")
                }
                Button("Second") {
                    print("Pressed")
                }
                        }
        }
        .padding()
    }
}

Oh, no! I marked your answer as accepted just minutes to late ... otherwise you would have received the bounty. Sorry. — Johan Jonasson, Dec 08 '22 at 11:14

score 0 · Answer 2 · answered Dec 08 '22 at 11:20

With the help of Jai Gupta's answer I realized the item is not displayed in the overflow menu if there is no text in the label.

I changed ImageButton from

struct ImageButton: View {
    let imageName: String
    
    var body: some View {
        Button {
            print("PONG")
        } label: {
            Image(systemName: imageName)
        }
    }
}

to

struct ImageButton: View {
    let imageName: String
    
    var body: some View {
        Button {
            print("PONG")
        } label: {
            Label(imageName, systemImage: imageName)
        }
    }
}

and the overflow menu became populated.

SwiftUI: Why is the overflow menu in the toolbar empty?

2 Answers2