SwiftUI App on iPad, List in Popover does not render properly

I am writing a document-based app using the new SwiftUI 'App' protocol. I have a '+' button that reveals a popover. Within the popover, I have a List of buttons.

When rendering this, the simulator shows a very small rectangle and *none* of the buttons. If I change this to a VStack and ForEach, I get a set of buttons.

Is there something I am doing wrong to render a List in the Popover? I want to use the List for the separators and the 'grouped' formatting of the List view for more polish finish.

Any suggestions on how to get this to work?

Code Block swift
import SwiftUI
enum DragAction: String {
    case addEntry = "addEntry"
    case addTask = "addTask"
    case addAttachment = "addAttachment"
}
struct MenuItem: Identifiable {
    var id = UUID()
    let name: String
    let iconName: String
    let dragAction: DragAction
}
struct PlusPopoverMenu: View {
    @Binding var isPresented: Bool
    let menuItems: [MenuItem] = [
        MenuItem(name: "Add Entry", iconName: "pencil.and.outline", dragAction: .addEntry),
        MenuItem(name: "Add Task", iconName: "checkmark.square", dragAction: .addTask),
        MenuItem(name: "Add Attachment", iconName: "rectangle.and.paperclip", dragAction: .addAttachment),
    ]
    var body: some View {
        VStack(alignment: .leading) {
            ForEach(menuItems) { item in
                    HStack {
                        Text(item.name)
                        Spacer()
                        Image(systemName: item.iconName)
                    }
                    .padding(12.0)
                    .background(Color(UIColor.systemBackground))
                    .onDrag {
                        isPresented = false
                        return NSItemProvider(object: item.dragAction.rawValue as NSString) }
            }
        }
        .listStyle(InsetGroupedListStyle())
        .padding(16.0)
        .background(Color(UIColor.systemGroupedBackground))
        /* THis is broken in beta 1
        List(menuItems) { item in
                HStack {
                    Text(item.name)
                    Spacer()
                    Image(systemName: item.iconName)
                }
                .onDrag {
                    isPresented = false
                    return NSItemProvider(object: item.dragAction.rawValue as NSString) }
        }
        .listStyle(InsetGroupedListStyle())
        .padding(16.0)
         */
    }
}





Accepted Reply

Thanks for the test on iOS 13.5. I was using the iOS 14.0 simulator. Looks like an iOS 14.0 bug.

Replies

I tested (on 13.5 simulator) and both VStack and List work (showing the right system icon).

I just had to comment out
        .listStyle(InsetGroupedListStyle())
Thanks for the test on iOS 13.5. I was using the iOS 14.0 simulator. Looks like an iOS 14.0 bug.

I still see this happening with iOS 15 simulator. This answer on Stack Overflow, to add a frame with minimum sizes for the popover, seems to help: https://stackoverflow.com/a/64253444/1359088