How to keep a sidebar item selected when navigation link is triggered in the detail view on iPadOS with SwiftUI?

Question

Vinestro OP

Created Nov ’21

Replies 5

Boosts 0

Views 2.1k

Participants 4

Hi !

I'm asking your help today about a mysterious behavior of the navigation link coupled with the sidebar on iPadOS. First, here is my sidebar code:

    List(1..<5) { _ in
        NavigationLink(destination: DetailView()) {
            Label("Item", systemImage: "house")
        }
    }
    .listStyle(SidebarListStyle())
}

This view contains navigation links to display a detail view as you can see. My detail view contains another navigation link to a simple view containing a Text. Here is the code of my detail view:

    Spacer()

    NavigationLink(destination: Text("Hello")) {
        Text("Touch me")
    }

    Spacer()
}

Now, let's compile this code:

The sidebar is well displayed and the first item is selected. Now let's tap the button on the detail view to trigger a navigation link inside the detail view.

When tapping the button, the navigation link is triggered as wanted, but the item in the sidebar become unselected. To compare, I would like to reproduce the iPad Music app navigation of the Album item of the sidebar. In there, you can select an album and go further in the navigation stack. And it keeps the sidebar item selected ! Can you help me to fix this issue ?

Thanks a lot !

Boost

Answer 1

MobileTen OP

Nov ’21

You need to store the row selected in a state variable. See the Fruta sample code for SmoothieList.

@State private var selection: String?
...
NavigationLink(tag: some_kind_value_to_tag_each_nav_link_from_list, selection: $selection)
...

0

Answer 2

Vinestro OP

Nov ’21

Thank you for your answer MobileTen.

Actually, looking Fruta sample code, I already tried to use selection. Here is what I got:

@State private var selection: String?

    var body: some View {

		NavigationView {

			List {

				NavigationLink(destination: DetailView(), tag: "1", selection: $selection) {

					Label("Item 1", systemImage: "house")

				}

				

				NavigationLink(destination: DetailView(), tag: "2", selection: $selection) {

					Label("Item 2", systemImage: "house")

				}

				

				NavigationLink(destination: DetailView(), tag: "3", selection: $selection) {

					Label("Item 3", systemImage: "house")

				}

			}

			.listStyle(SidebarListStyle())

		}

    }

Once on my Detail view, here is my code:

	var body: some View {

		VStack {

			Spacer()



			NavigationLink(destination: Text("Hello")) {

				Text("Touch me")

			}



			Spacer()

		}

    }

But when I tap on the "Touch me" navigation link, the item in sidebar become unselected. Am I doing it right ? It's pretty weird because this behavior seems to appear only on iPadOS 15, I did not have the problem on iPadOS 14.

0

Answer 3

Surikata OP

Nov ’21

Hello, I have the same problem. If I navigate in detail view it deselects the main navigation. Were you able to solve the problem without having to manually save the selected item?

0

Answer 4

Vinestro OP

Nov ’21

Hello Surikata. Unfortunately, I currently unable to solve my problem... I keep looking for a solution and I'll keep you in touch if I find anything useful. I hope someone will help us here.

0

Answer 5

Awaking OP

May ’22

Same issue here. It's interesting that NavigationView doesn't reset its selected value if works not as a sidebar but as a regular navigation stack.

0