NavigationLink with isActive creates unusual scrolling behavior in macOS SwiftUI app

Question

I have a macOS app with a 3-column view. In the first column, there is a List of items that is lengthy -- perhaps a couple hundred items.

If my NavigationLink for each item contains a isActive parameter, when clicking on the NavigationLinks, I get unpredictable/unwanted scrolling behavior on the list.

For example, if I scroll down to Item 100 and click on it, the List may decide to scroll back up to Item 35 or so (where the active NavigationLink is out of the frame). The behavior seems somewhat non-deterministic -- it doesn't always scroll to the same place. It seems less likely to scroll to an odd location if I scroll through the list to my desired item and then wait for the system scroll bars to disappear before clicking on the NavigationLink, but it doesn't make the problem disappear completely.

If I remove the isActive parameter, the scroll position is maintained when clicking on the NavigationLinks.

struct ContentView : View {
    var body: some View {
        NavigationView {
            SidebarList()
            Text("No selection")
            Text("No selection")
                .frame(minWidth: 300)
        }
    }
}

struct Item : Identifiable, Hashable {
    let id = UUID()
    var name : String
}

struct SidebarList : View {
    @State private var items = Array(0...300).map { Item(name: "Item \($0)") }
    @State private var activeItem : Item?
    
    func navigationBindingForItem(item: Item) -> Binding<Bool> {
        .init {
            activeItem == item
        } set: { newValue in
            if newValue { activeItem = item }
        }
    }
    
    var body: some View {
        List(items) { item in
            NavigationLink(destination: InnerSidebar(),
                           isActive: navigationBindingForItem(item: item) //<-- Remove this line and everything works as expected
            ) {
                Text(item.name)
            }
        }.listStyle(SidebarListStyle())
    }
}

struct InnerSidebar : View {
    @State private var items = Array(0...100).map { Item(name: "Inner item \($0)") }
    
    var body: some View {
        List(items) { item in
            NavigationLink(destination: Text("Detail")) {
                Text(item.name)
            }
        }
    }
}

I would like to keep isActive, as I have some programatic navigation that I'd like to be able to do that depends on it. For example:

Button("Go to item 10") {
  activeItem = items[10]
}

Is there any way to use isActive on the NavigationLink and avoid the unpredictable scrolling behavior?

(Built and tested with macOS 11.3 and Xcode 13.0)

Answer 1

The observed effect is because body of your main view is refreshed and all internals rebuilt. To avoid this we can separate sensitive part of view hierarchy into standalone view, so SwiftUI engine see that dependency not changed and view should not be updated.

Here is a fixed parts:

struct SidebarList : View {
    @State private var items = Array(0...300).map { Item(name: "Item \($0)") }
    @State private var activeItem : Item?

    var body: some View {
        List(items) {
          SidebarRowView(item: $0, activeItem: $activeItem)  // << here !!
        }.listStyle(SidebarListStyle())
    }
}

struct SidebarRowView: View {
    let item: Item
    @Binding var activeItem: Item?

    func navigationBindingForItem(item: Item) -> Binding<Bool> {
        .init {
            activeItem == item
        } set: { newValue in
            if newValue {
                    activeItem = item
                }
        }
    }

    var body: some View {
        NavigationLink(destination: InnerSidebar(),
                            isActive: navigationBindingForItem(item: item)) {
            Text(item.name)
        }
    }
}

Tested with Xcode 13 / macOS 11.6