Search code examples
swiftuiswiftui-navigationstackswiftui-searchable

Issue with SwiftUI NavigationStack, Searchable Modifier, and Returning to Root View (iOS18)


I'm facing an issue with SwiftUI's NavigationStack when using the searchable modifier. Everything works as expected when navigating between views, but if I use the search bar to filter a list and then tap on a filtered result, I can navigate to the next view. However, in the subsequent view, my "Set and Return to Root" button, which is supposed to call popToRoot(), does not work. Here's the setup:

Structure: RootView: Contains a list with items 1-7. ActivityView: Contains a list of activities that can be filtered with the searchable modifier. SettingView: Contains a button labeled "Set and Return to Root" that calls popToRoot() to navigate back to the root view.

RootView

struct RootView: View {
    @EnvironmentObject var navManager: NavigationStateManager
    
    var body: some View {
        NavigationStack(path: $navManager.selectionPath) {
            List(1...7, id: \.self) { item in
                Button("Element \(item)") {
                    // Navigate to ActivityView with an example string
                    navManager.selectionPath.append(NavigationTarget.activity)
                }
            }
            .navigationTitle("Root View")
            .navigationDestination(for: NavigationTarget.self) { destination in
                switch destination {
                case .activity:
                    ActivityView()
                case .settings:
                    SettingsView()
                }
            }
        }
    }
}

ActivityView

struct ActivityView: View {
    @EnvironmentObject var navManager: NavigationStateManager
    
    let activities = ["Running", "Swimming", "Cycling", "Hiking", "Yoga", "Weightlifting", "Boxing"]
    
    @State private var searchText = ""
    
    var filteredActivities: [String] {
        if searchText.isEmpty {
            return activities
        } else {
            return activities.filter { $0.localizedCaseInsensitiveContains(searchText) }
        }
    }
    
    var body: some View {
        List {
            ForEach(filteredActivities, id: \.self) { activity in
                NavigationLink(
                    destination: SettingsView(), // Navigiere zur SettingsView
                    label: {
                        HStack {
                            Text(activity)
                                .padding()
                            Spacer()
                        }
                    }
                )
            }
        }
        
        .navigationTitle("Choose Activity")
        .searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .always), prompt: "Search Activities")
    }
}

SettingView

struct SettingsView: View {
    @EnvironmentObject var navManager: NavigationStateManager

    var body: some View {
        VStack {
            Text("Settings")
                .font(.largeTitle)
                .padding()

            Button("Set and Return to Root") {
                // Pop to the root view when the button is pressed
                navManager.popToRoot()
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
        }
        .navigationTitle("Settings")
    }
}

NavigationStateManager

// Define enum globally at the top
enum NavigationTarget {
    case activity
    case settings
}

class NavigationStateManager: ObservableObject {
    @Published var selectionPath = NavigationPath()

    func popToRoot() {
        selectionPath = NavigationPath()
    }

    func popView() {
        selectionPath.removeLast()
    }
}

// RootView, ActivityView, SettingsView, and ContentView follow as described earlier...

Problem:

When I search in the ActivityView and tap on a filtered result, I successfully navigate to the SettingView. However, in this view, pressing the "Set and Return to Root" button does not trigger the navigation back to RootView, even though popToRoot() is being called.

This issue only occurs when using the search bar and filtering results. If I navigate without using the search bar, the button works as expected.

Question:

Why is the popToRoot() function failing after a search operation, and how can I ensure that I can return to the root view after filtering the list?

Any insights or suggestions would be greatly appreciated!

The issue only occurs with iOS 18, but not with iOS 17.


Solution

  • I've now worked around the issue by controlling the list in the ActivityView with a showList state. The state is set to true in onAppear and then set to false in onDisappear, which disables the problematic behavior. I'm not sure if this is a good workaround and hope it doesn't cause any side effects.

    struct ActivityView: View {
    
    @Environment(NavigationStateManager.self) private var navManager: NavigationStateManager
    @State private var showList = true
    
    let activities = ["Running", "Swimming", "Cycling", "Hiking", "Yoga", "Weightlifting", "Boxing"]
    
    @State private var searchText = ""
    
    var filteredActivities: [String] {
        if searchText.isEmpty {
            return activities
        } else {
            return activities.filter { $0.localizedCaseInsensitiveContains(searchText) }
        }
    }
    
    var body: some View {
        ZStack {
            if (showList) {
                List {
                    ForEach(filteredActivities, id: \.self) { activity in
                        NavigationLink(
                            value: NavigationTarget.settings,
                            label: {
                                HStack {
                                    Text(activity)
                                        .padding()
                                    Spacer()
                                }
                            }
                        )
                    }
                }
                .searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .always), prompt: "Search Activities")
            }
        }
        .navigationTitle("Choose Activity")
        .onAppear {
            showList = true
        }
        .onDisappear {
            showList = false
        }
    }
    

    }