Search code examples
iosswiftswiftuiios15xcode13

SwiftUI searchable on NavigationView always shown, hides only on scroll


I'm writing a fairly simple SwiftUI app about movies and I have this issue where the new .searchable modifier on NavigationView is always being shown, whereas it should be hidden, unless you pull down on the List.

It hides it correctly if I scroll a bit up, and if I scroll down it also hides it correctly, but other than that, it's always being shown. See gif for clarification. (basically it should behave the same as in Messages app)

https://i.sstatic.net/9t87V.jpg

My code for using the searchable is fairly simple:

var body: some View {
        NavigationView {
            List {
                ForEach(/*** movie stuff ***/) { movie in
                    ///// row here
                }
            }
            .listStyle(GroupedListStyle())
            .onAppear {
                // load movies
            }
            .navigationTitle("Discover")
            .searchable(text: $moviesRepository.searchText, placement: .toolbar, prompt: "Search...")
        }
    }
}

Solution

  • So, after adding a progress view above the list view, it suddenly started working the way I want it to. The code now is minimally changed and looks like this.

    var body: some View {
        NavigationView {
            VStack {
                if /** we're doing search, I'm checking search text **/ {
                    ProgressView()
                        .padding()
                }
    
                if !movies.isEmpty {
                    List {
                        ForEach(/** movies list **/) { movie in
                            // movie row here
                        }
                    }
                    .listStyle(GroupedListStyle())
                    .navigationTitle("Discover")
                    .searchable(text: $moviesRepository.searchText, placement: .toolbar,
                                prompt: Text("Search...")
                                    .foregroundColor(.secondary)
                    )
                } else {
                    ProgressView()
                        .navigationTitle("Discover")
                }
            }
        }
        .onAppear {
            // load movies
        }
    }
    

    And basically after adding the progress views, it started working the way I described it in my OP and the way it worked for ChrisR