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