NavigationSplitView on macOS: OutlineGroup Elements in Sidebar not selectable

1.1k views Asked by At

I have a simple Example of NavigationSplitView with different types in the Sidebar, including an OutlineGroup.

Problem: OutlineGroup's parent nodes are selectable, child nodes (leafs) are not. Nodes without children also are not selectable.

Target is macOS. Any Ideas?

enter image description here

struct Tree: Identifiable, Hashable {
    let id = UUID()
    var name: String
    var children: [Tree]? = nil
}

enum SideBar: Hashable {
    case number(Int)
    case tree(Tree)
}

struct ContentView: View {
    
    let trees = [
        Tree(name: "One", children: [Tree(name: "One-1"), Tree(name: "One-2"), Tree(name: "One-3")]),
        Tree(name: "Two", children: [Tree(name: "Two-1"), Tree(name: "Two-2"), Tree(name: "Two-3")]),
        Tree(name: "Three"),
    ]
    
    @State private var selection: SideBar?
    
    var body: some View {
        
        NavigationSplitView {
            List(selection: $selection) {
                
                Section("Numbers") {
                    ForEach(1..<6) { number in
                        NavigationLink("\(number)", value: SideBar.number(number))
                    }
                }
                
                Section("Tree") {
                    OutlineGroup(trees, children: \.children) { tree in
                        NavigationLink(tree.name, value: SideBar.tree(tree))
                    }
                }
            }
            
        } detail: {
            switch selection  {
            case .number(let nr):
                Text("Number \(nr)")
                    .navigationTitle("Numbers")
            case .tree(let tree):
                Text("Tree element \(tree.name)")
                    .navigationTitle("Tree")

            case nil:
                Text("please choose")
            }
        }
    }
}

EDIT:

Based on @Asperi's comment: This works – but seems not very native.

            Section("Tree") {
                OutlineGroup(trees, children: \.children) { tree in
                    NavigationLink(tree.name, value: SideBar.tree(tree))
                        .onTapGesture {
                            selection = SideBar.tree(tree)
                        }
                }
            }

Does anybody have a more straightforward solution?

0

There are 0 answers