searchable modifier not displaying search bar below navigation bar title

user_2256031 0
Viewed 1211

I'm using iOS 15 and trying out the new searchable modifier on Lists in SwiftUI. It looks like when you attach searchable(text: $searchText) to a NavigationView the search bar renders on the screen by default below the navigation bar title. When I've tried using it and I run the simulator, the search bar isn't rendered on the screen. Only when I start scrolling down on the screen through the list, does the search bar appear on the screen.

Is this expected behavior?

Here's the code.

@State private var searchText = ""
let data = (1...50).map( {_ in Int.random(in: 1...10)} )

var body: some View {
    NavigationView {
        List {
            ForEach(data, id: \.self) { d in
                Text("\(d)")
            }
        }
    }.searchable(text: $searchText)
}

Before scrolling

enter image description here

After scrolling

enter image description here

swiftui-foreach swiftui-navigationview swiftui-list swiftui
1 Answers

It is default behavior, to see it always we need to provide corresponding placement, like

NavigationView {
    List {
        ForEach(data, id: \.self) { d in
            Text("\(d)")
        }
    }
}
.searchable(text: $searchText, 
       placement: .navigationBarDrawer(displayMode: .always))  // << here !!
user_122990300
Related