How to stop showing Detail view when item in Master view deleted?

Question

I have a Master and Detail views. User can tap on a item in Master view and details of that item is shown in Detail view. Also user can delete items from Master view — in that case, Detail view should display a text "Please select an item.".

My problem is that when I delete item in Master view on iPadOS in landscape mode, Detail view still shows content from that deleted item.

My goal is to show text "Please select an item." as soon as item deleted. For example, if "Item 2" is selected and being deleted, display only Text("Please select an item.") view after delete operation. Would appreciate any suggestions, thanks!

struct DetailView: View {
    var item: String
    var body: some View {
        Text("Detail of \(item)")
    }
}

struct ContentView: View {
    @State private var items = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        NavigationView {
            List {
                ForEach(items, id: \.self) { item in
                    NavigationLink(destination: DetailView(item: item)) {
                        Text(item)
                    }
                }
                .onDelete(perform: delete)
            }
            Text("Please select an item.")
        }
    }

    func delete(at offsets: IndexSet) {
        items.remove(atOffsets: offsets)
    }
}

score 2 · Accepted Answer · answered Jan 28 '21 at 19:01

Try the following (not tested, just idea - on delete there is not new selection/navigation in stack so details view is not refreshed, so we can try to force that refresh explicitly):

struct ContentView: View {
    @State private var items = ["Item 1", "Item 2", "Item 3"]

    @State private var refreshID = UUID()    // << this !!

    var body: some View {
        NavigationView {
            List {
                ForEach(items, id: \.self) { item in
                    NavigationLink(destination: DetailView(item: item)) {
                        Text(item)
                    }
                }
                .onDelete(perform: delete)
            }
            Text("Please select an item.")
        }
        .id(refreshID)                    // << here !!
    }

    func delete(at offsets: IndexSet) {
        items.remove(atOffsets: offsets)
        refreshID = UUID()               // << here !!
    }
}

While this works it should be noted this will reset all UI state inside the NavigationView including scrolling. I would suggest using this answer to a similar question. https://stackoverflow.com/a/60069402/3247557 — Manny, Sep 06 '21 at 16:50

How to stop showing Detail view when item in Master view deleted?

1 Answers1