Search code examples
swiftuitoolbaripados

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

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.

Items hidden in a menu that you can not open

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.
Solution

  • 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()
    }
}