How to keep the selected item on DetailView when picker selection changed

Question

I have a NavigationSplitView with a Picker that shows 2 list on a MainView. When you select an item, the DetailView is update. The problem is that when you change the picker selection the DetailView not always show a value. I want to keep the DetailView until the user select other value.

This a little example code that shows the problem.

 import SwiftUI

  struct Model1: Identifiable, Hashable {
    let id = UUID()
    let title: String
    let description: String
}

struct Model2: Identifiable, Hashable {
    let id = UUID()
    let name: String
    let address: String
}


struct CustomData: Identifiable {
    var id =  UUID()
    var docs: [Model1]
    var lites: [Model2]
    
    init(docs: [Model1], lites: [Model2]) {
        self.docs = docs
        self.lites = lites
    }
}

@MainActor
final class TestViewModel: ObservableObject {
    
    @Published var data: CustomData?
    
    func loadData() {
        //FetchData
        let docs = [Model1(title: "title1", description: "desc1"), Model1(title: "title2", description: "desc2"), Model1(title: "title3", description: "desc3")]
        
        let lites = [Model2(name: "value1", address: "desc1"), Model2(name: "value2", address: "desc2"), Model2(name: "value3", address: "desc3")]
        
        self.data = CustomData(docs: docs, lites: lites)
    }
    
    func lites() -> [Model2] {
        return data?.lites ?? []
    }
    
    
    func docs() -> [Model1] {
        return data?.docs ?? []
    }
}


struct TestView2: View {
    @State private var subpage = 0
    
    @ObservedObject var viewModel =  TestViewModel()
    
    var body: some View {
        NavigationSplitView {
            VStack {
                Picker("Select option", selection: $subpage) {
                    Text("Lites").tag(0)
                    
                    Text("Docs").tag(1)
                }
                .pickerStyle(.segmented)
                
                //
                VStack() {
                    switch(subpage){
                    case 0: //List of Lites
                        List(viewModel.lites()) { lite in
                            NavigationLink(value: lite) {
                                HStack (alignment: .top) {
                                    Text(lite.name)
                                        .padding(.top, 10)
                                        .padding(.leading, 5)
                                        .font(.system(.headline))
                                }
                            }
                        }
                        .navigationDestination(for: Model2.self) { lite in
                            DetailView2(path: lite.name)
                        }
                    case 1:
                        List(viewModel.docs()) { doc in
                            NavigationLink(value: doc) {
                                HStack (alignment: .top) {
                                    Text(doc.title)
                                        .padding(.top, 10)
                                        .padding(.leading, 5)
                                        .font(.system(.subheadline))
                                }
                            }
                        }
                        .navigationDestination(for: Model1.self) { doc in
                            DetailView2(path: doc.title)
                        }
                    default:
                        Text("No docs")
                    }
                }
                .accentColor(AppColors.LightBlue)
                .padding(.top, 10)
                .scrollContentBackground(.hidden)
                .background(AppColors.LightGray)
                
            }
        }
    detail: {
        DetailView2(path: "Example Text")
    }
    .onAppear(){
        viewModel.loadData()
    }
        
    }
}

struct DetailView2: View {
    
    var path: String
    
    var body: some View {
        VStack(spacing: .infinity) {
            Text(path)
        }
        .navigationBarHidden(true)
    }
}

struct TestView2_Previews: PreviewProvider {
    static var previews: some View {
        TestView2()
            .previewInterfaceOrientation(.landscapeRight)
            .previewDevice("iPad (9th generation)")
    }
}

Answer 1

You need to add a destination navigationDestination to your VStack like this

import SwiftUI

struct Model1: Identifiable, Hashable {
  let id = UUID()
  let title: String
  let description: String
}

struct Model2: Identifiable, Hashable {
  let id = UUID()
  let name: String
  let address: String
}


struct CustomData: Identifiable {
  var id =  UUID()
  var docs: [Model1]
  var lites: [Model2]
  
  init(docs: [Model1], lites: [Model2]) {
      self.docs = docs
      self.lites = lites
  }
}

@MainActor
final class TestViewModel: ObservableObject {
    
    @Published var data: CustomData?
    
    func loadData() {
        //FetchData
        let docs = [Model1(title: "title1", description: "desc1"), Model1(title: "title2", description: "desc2"), Model1(title: "title3", description: "desc3")]
        
        let lites = [Model2(name: "value1", address: "desc1"), Model2(name: "value2", address: "desc2"), Model2(name: "value3", address: "desc3")]
        
        self.data = CustomData(docs: docs, lites: lites)
    }
    
    func lites() -> [Model2] {
        return data?.lites ?? []
    }
    
    
    func docs() -> [Model1] {
        return data?.docs ?? []
    }
}

@available(iOS 16.0, *)
struct TestView2: View {
    @State private var subpage = 0
    
    @ObservedObject var viewModel =  TestViewModel()
    
    var body: some View {
        NavigationSplitView {
            VStack {
                Picker("Select option", selection: $subpage) {
                    Text("Lites").tag(0)
                    
                    Text("Docs").tag(1)
                }
                .pickerStyle(.segmented)
                
                //
                VStack() {
                    switch(subpage){
                    case 0: //List of Lites
                        List(viewModel.lites()) { lite in
                            NavigationLink(value: lite) {
                                HStack (alignment: .top) {
                                    Text(lite.name)
                                        .padding(.top, 10)
                                        .padding(.leading, 5)
                                        .font(.system(.headline))
                                }
                            }
                        }
                    case 1:
                        List(viewModel.docs()) { doc in
                            NavigationLink(value: doc) {
                                HStack (alignment: .top) {
                                    Text(doc.title)
                                        .padding(.top, 10)
                                        .padding(.leading, 5)
                                        .font(.system(.subheadline))
                                }
                            }
                        }
                    default:
                        Text("No docs")
                    }
                }
                .accentColor(.blue)
                .padding(.top, 10)
                .scrollContentBackground(.hidden)
                .background(.gray)
                .navigationDestination(for: Model1.self) { doc in
                    DetailView2(path: doc.title)
                }
                .navigationDestination(for: Model2.self) { lite in
                    DetailView2(path: lite.name)
                }
            }
        }
    detail: {
        DetailView2(path: "Example Text")
    }
    .onAppear(){
        viewModel.loadData()
    }
        
    }
}

struct DetailView2: View {
    
    var path: String
    
    var body: some View {
        VStack(spacing: .infinity) {
            Text(path)
        }
        .navigationBarHidden(true)
    }
}

@available(iOS 16.0, *)
struct TestView2_Previews: PreviewProvider {
    static var previews: some View {
        TestView2()
            .previewInterfaceOrientation(.landscapeRight)
            .previewDevice("iPad (9th generation)")
    }
}