NavigationStackView .searchable modifier not visible when embedded in NavigationSplitView

61 Views Asked by At

can’t figure out why a NavigationStack with a .searchable modifier isn’t showing a search bar when embedded into a NavigationSplitView.

Here’s how I’m showing the Navigation on the homescreen for iPads:

if UIDevice.current.userInterfaceIdiom == .pad {
   NavigationSplitView {
      List(navItems, id: \.self, selection: $selectedNavItem) { navItem in
         Text(navItem)
      }
   } detail: {
      if selectedNavItem == "Search" {
         SearchableView()
      } else {
         // …
      }
   }
}

And then in SearchableView, I have the following:

NavigationStack(path: $navPath) {
   VStack(alignment: .leading, spacing: 0) {
      // …
   }
   .navigationTitle("Search")
}
.searchable(
   text: self.$query,
   placement: .navigationBarDrawer(displayMode: .always),
   prompt: "Search…"
)

SearchableView works just fine as long as it’s not in a NavigationSplitView. The docs for .searchable say that you can add the .searchable modifier to the column it appears in on the view containing the NavigationSplitView, which makes me think this is an intentional limitation. But since you’re allowed to use a NavigationStackView here it seems weird to have to add the search functionality and modifier to the containing view as well. Any ideas? Wondering what I’m missing?

EDIT: Upon further inspection it looks like .searchable is added to the nav list in the docs and adding it to a view in the detail column doesn’t work. However, Apple definitely uses this pattern for Apple Music (and I don’t see anything in the docs suggesting this shouldn’t work).

0

There are 0 best solutions below