SwiftUI - Perform action when cancel is clicked - .searchable function

Question

When using the .searchable(text: $text) function, a cancel button appears in the search bar when searching.

Is there any way to perform an action when the cancel button is clicked? I would like to call a function when cancel is clicked, but cannot figure out how to perform an action when cancel is tapped.

The Apple Documentation does not mention anything about this. Back in UIKit there was the func searchBarCancelButtonClicked(searchBar: UISearchBar) { to do this.

Below is an image of the cancel button I am referring to:

score 13 · Accepted Answer · answered Sep 28 '21 at 04:01

You can use the isSearching environment value (https://developer.apple.com/documentation/swiftui/environmentvalues/issearching?changes=_6) to see if a search is being performed. To do an action upon cancelation, you could watch for a change from true to false using onChange:


struct ContentView: View {
    @State private var searchText = ""
    @Environment(\.dismissSearch) var dismissSearch
    
    var body: some View {
        NavigationView {
            VStack {
                ChildView()
                Text("Searching for \(searchText)")
                
            }
            
            .searchable(text: $searchText)
            .navigationTitle("Searchable Example")
        }
    }
}

struct ChildView : View {
    @Environment(\.isSearching) var isSearching
    
    var body: some View {
        Text("Child")
            .onChange(of: isSearching) { newValue in
                if !newValue {
                    print("Searching cancelled")
                }
            }
    }
}

Probably important to note that it seems like isSearching has to be inside a child view of the searchable modifier in order for it to work properly

Thanks for pointing me to the documentation. Wouldn't it change to false if the user clicked the "Search" button as well? — nickreps, Sep 28 '21 at 04:26
Not in my testing, no. Are you experiencing something different? — jnpdx, Sep 28 '21 at 04:29
Just wanted to pick your brain before implementing. Tested and working as expected. Thanks! — nickreps, Sep 28 '21 at 04:34

score 1 · Answer 2 · answered Mar 16 '22 at 22:30

Based on @jnpdx 's answer, something equivalent, but more generic is:

struct SearchView<Content: View>: View {
    @Environment(\.isSearching) var isSearching
    let content: (Bool) -> Content

    var body: some View {
        content(isSearching)
    }

    init(@ViewBuilder content: @escaping (Bool) -> Content) {
        self.content = content
    }
}

And then, use it like:

struct ContentView: View {
    @State private var searchText = ""
    @Environment(\.dismissSearch) var dismissSearch
    
    var body: some View {
        NavigationView {
            VStack {
                SearchView { isSearching in
                    Text("Child")
                        .onChange(of: isSearching) { newValue in
                            if !newValue {
                                print("Searching cancelled")
                            }
                        }
                }
                Text("Searching for \(searchText)")
                
            }
            
            .searchable(text: $searchText)
            .navigationTitle("Searchable Example")
        }
    }
}

score 1 · Answer 3 · answered Mar 29 '22 at 14:10

use isEmpty and onAppear.

struct SearchView: View {
    @State var text: String = ""
    
    var body: some View {
        NavigationView {
            VStack {
                if text.isEmpty {
                    main.onAppear {
                        print("empty")
                        // code here
                    }
                } else {
                    main
                }
            }.searchable(text: $text)
                .onSubmit(of: .search) {
                    print("submit")
                }
        }
    }
    
    var main: some View {
        Text("search").searchable(text: $text)
    }
}

This can cause major performance issues on large lists. – Hajji Daoud Apr 26 '22 at 14:24 — Hajji Daoud, Apr 26 '22 at 14:24

SwiftUI - Perform action when cancel is clicked - .searchable function

3 Answers3

Linked