CODEWITHSUNDEEP
swiftuiapple-watchwatchos
Clément Cardonnel
Clément Cardonnel

Reputation: 5257

.searchable modifier not working on watchOS 10.2, 10.3

So, we have a watchOS app in production featuring a list inside a navigation stack and a searchable modifier.

All worked well, but ever since the release of watchOS 10.2, the search bar has stopped working.

You can view, tap, and write a query, but the binding to the state variable does not work and it's impossible to read the user's query.

I've written a very simple demo View that showcases the issue. I tried it on a Series 7 Apple Watch running watchOS 10.2.

struct ContentView: View {

    @State private var searchText = ""
    @State private var showResult = false

    var body: some View {
        NavigationStack {
            List {
                Text("1")
                Text("2")
                Text("3")
                if showResult {
                    Text(searchText)
                }
            }
        }
        .searchable(text: $searchText)
        .onChange(of: searchText) { _, searchText in
            showResult = true
        }
    }
}

By the way, breakpoints on either @State searchText or inside the .onChange modifier are never triggered.

I have three questions:

  1. Am I doing something wrong here? This way of doing a search field worked previously, but maybe I am doing something bad and it shouldn't have worked in the first place.
  2. Have you noticed the issue as well? Is the code I provided also showcase a non-responsive search on your end?
  3. How to make it work?

Upvotes: 6

Views: 223

Answers (2)

Clément Cardonnel
Clément Cardonnel

Reputation: 5257

Apple finally fixed it in watchOS 10.4.

Upvotes: 1

Clément Cardonnel
Clément Cardonnel

Reputation: 5257

I decided to do an update to my app and replace the Searchable modifier by a simple TextField. It wasn't a lot of work, as most of the searchable logic could be reused.

Pros
  • It works now.
Cons
  • There's no more magnifying glass icon, and you can't actually add one in watchOS (even by using a Label)
  • Styling is not the same. The background color is slightly lighter than other cells in a list.
List {
     TextField(text: $searchText) {
         Text("Search", comment: "Search text field")
     }
}
.onChange(of: searchText) { _, searchInput in
    search(searchInput)
}

You could also use if #available(watchOS 10.2, *) to conditionally use the text field instead of searchable if you care about providing a better experience to users of previous system versions.

Upvotes: 0

Related Questions