SwiftUI NavigationLink greyed out - foreach

Question

After implementing a search function for my application I want the search results to be clickable.
Therefore, I embedded the search result into a Navigation Link, but something is wrong with that.
When I try to search for an object, the search result gets greyed out and the Navigation Link is not clickable.
Normally it looks like this (I know, that everyone knows that)
I implemented the search result in the the code snipped below under NavigationSearch()
To reproduce this error:
Use Mark van Wijnen's NavigationSearch out of his Medium article
This class:
import SwiftUI
struct TracksView2: View {
var tracks: [Track] = tracksData
#State private var searchText: String = ""
var filtered : [Track] {
if searchText.isEmpty {
return tracks
} else {
return tracks.filter({ $0.search(searchText) })
}
}
var body: some View {
NavigationView {
NavigationSearch(text: $searchText, searchResultsContent: {
ForEach(filtered, id: \.id) { track in
NavigationLink(destination: TrackDetailView(tracks: track)) {
TrackRowView(track: track)
}
}
})
} //: NAVIGATION
}
}
(And replace TrackDetailView with an EmptyView)
Create a datamodel like this:
import SwiftUI
struct Track: Identifiable {
var id = UUID()
var title: String
var headline: String
var image: String
var imagebig: String
var gradientColors: [Color]
var link: String
var description: String
var details: [String]
func search(_ query: String) -> Bool {
let searchable = [title, headline, description] + details
return searchable.filter({ $0.contains(query) }).count > 0
}
}
And use this sample data:
import SwiftUI
let tracksData: [Track] = [
Track(
title: "Spa-Francorchamps",
headline: "Die Ardennenachterbahn ist für viele die faszinierenste Rennstrecke überhaupt. ",
image: "road",
imagebig: "preview",
gradientColors: [Color("ColorBlueberryLight"), Color("ColorBlueberryDark")],
link: "https://www.wikipedia.de/",
description: """
Bis
""",
details: ["7004m","8,50-18,50m", "21","100m"]
),
Thanks in advance :)

Answer 1

Here is the UISearchBar wrapped in a UIViewRepresentable, credit to Tim W Swift UI Contacts. I have used it and it works. Maybe give it a try?
struct SearchBar: UIViewRepresentable {
#Binding var text: String
var placeholder: String?
class Coordinator: NSObject, UISearchBarDelegate {
#Binding var text: String
init(text: Binding<String>) {
_text = text
}
func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
text = searchText
}
}
func makeCoordinator() -> SearchBar.Coordinator {
return Coordinator(text: $text)
}
func makeUIView(context: UIViewRepresentableContext<SearchBar>) -> UISearchBar {
let searchBar = UISearchBar(frame: .zero)
searchBar.delegate = context.coordinator
searchBar.autocapitalizationType = .none // --> here, we make some adjustments to the view so it better fits to our app
searchBar.searchBarStyle = .minimal
searchBar.placeholder = placeholder
return searchBar
}
func updateUIView(_ uiView: UISearchBar, context: UIViewRepresentableContext<SearchBar>) {
uiView.text = text
}
}