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