Zied Mcharek
Zied Mcharek

Reputation: 41

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.

Upvotes: 1

Views: 316

Answers (2)

Zied Mcharek
Zied Mcharek

Reputation: 41

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
    }
}

}

Upvotes: 1

Andrei G.
Andrei G.

Reputation: 1557

The problem is in your ActivityView, you navigate "manually", that is without affecting the path, which expects a value/case of NavigationTarget (as per the configuration of .navigationDestination in RootView.

To fix it, instead of a set destination, use a value of NavigationTarget for the NavigationLink. So your filteredActivities loop should be:

ForEach(filteredActivities, id: \.self) { activity in
    NavigationLink(
        value: NavigationTarget.settings, // <- Here, use value instead of destination

        label: {
            HStack {
                Text(activity)
                    .padding()
                Spacer()
            }
        }
    )
}

Here's the full code which includes the necessary Preview settings (for XCode 16, that uses @Previewable), which your original code misses.

import SwiftUI

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:
                        ActivitySettingsView()
                }
            }
        }
    }
}

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(
                    value: NavigationTarget.settings, // <- Here, use value instead of destination

                    label: {
                        HStack {
                            Text(activity)
                                .padding()
                            Spacer()
                        }
                    }
                )
            }
        }
        .navigationTitle("Choose Activity")
        .searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .always), prompt: "Search Activities")
    }
}

struct ActivitySettingsView: 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) // <- Deprecated
            .clipShape(RoundedRectangle(cornerRadius: 10)) // <- Use this instead
        }
        .navigationTitle("Settings")
    }
}

// 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...

#Preview {
    @Previewable @StateObject var navManager: NavigationStateManager = NavigationStateManager()
    
    RootView()
        .environmentObject(navManager)
    
}

I noticed you're still using the old Observable Object protocol, with ObservableObject, EnvironmentObject, etc. I don't know if it's intentional, but you should consider migrating to the new Observable macro.

Here's a version of the code above that uses the Observable macro instead:

import SwiftUI
import Observation

struct RootView: View {
    @Environment(NavigationStateManager.self) private var navManager: NavigationStateManager

    
    var body: some View {
        
        @Bindable var navManager = navManager //get a binding to the Environment object
        
        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:
                        ActivitySettingsView()
                        
                }
            }
        }
    }
}

struct ActivityView: View {
    @Environment(NavigationStateManager.self) private 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(
                    value: NavigationTarget.settings, // <- Here, use value instead of destination
                    // destination: SettingsView(), // Navigiere zur SettingsView
                    
                    label: {
                        HStack {
                            Text(activity)
                                .padding()
                            Spacer()
                        }
                    }
                )
            }
        }
        
        .navigationTitle("Choose Activity")
        .searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .always), prompt: "Search Activities")
    }
}

struct ActivitySettingsView: View {
    @Environment(NavigationStateManager.self) private 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) // <- Deprecated
            .clipShape(RoundedRectangle(cornerRadius: 10)) // <- Use this instead
        }
        .navigationTitle("Settings")
    }
}

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

@Observable
class NavigationStateManager {
    
    var selectionPath = NavigationPath()
    
    func popToRoot() {
        selectionPath = NavigationPath()
    }
    
    func popView() {
        selectionPath.removeLast()
    }
}

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

#Preview {
    @Previewable @State var navManager: NavigationStateManager = NavigationStateManager()
    
    RootView()
        .environment(navManager)
    
}

If you plan to use a TabView and possibly multiple navigation stacks each with its path, I provided an answer here that shows how to go about it, which allows to control the popToRoot for a specific tab/path.

enter image description here

Upvotes: 0

Related Questions