Search code examples
iosswiftswiftui

Refreshable ProgressView displays over searchable SearchBar but only as root of NavigationStack


I have a SwiftUI app with a view that's both searchable and refreshable. When it's the root of a NavigationStack, the search & progress views display on top of each other. When I push to that same view from a NavigationLink, they are not on top of each other. I've tried rearranging the order of searchable/refreshable and moving them to different levels in the view, but that didn't change anything. How do I get the root view to not have an overlapping search bar and progress view?

Root view on the left, non-root view on the right:

as root view as detail view

Here's a minimal repro:

import SwiftUI

@main
struct RefreshableSearchableISsueApp: App {
    var body: some Scene {
        WindowGroup {
            NavigationStack {
                ContentView()
            }
        }
    }
}
struct ContentView: View {
    @State var items = ["1", "2", "3", "4", "5"]
    @State var searchText = ""
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                NavigationLink(destination: ContentView()) {
                    HStack {
                        Text(item)
                        Spacer()
                    }
                }
            }
        }
        .searchable(text: $searchText)
        .refreshable { try? await Task.sleep(for: .seconds(1)) }
    }
}

Solution

  • This might be because your searchable search bar is allowed to be hidden. I fixed this problem by modifying my .searchable modifier like this:

    .searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .always))