I have a simple scenario. I have a list of values and I want to allow the user to search the vales and then tap on one to navigate to a detail view.

In a simplified example I add searchable to a navigation stack wrapping a list and I use a navigation link to display the child view.

struct ContentView: View {
    let names = ["Holly", "Josh", "Rhonda", "Ted"]
    @State private var searchText = ""

    var body: some View {
        NavigationStack {
            List {
                ForEach(searchResults, id: \.self) { name in
                    NavigationLink {
                        ZStack {
                            Color.red.frame(width: .infinity, height: .infinity)
                            Text(name)
                        }
                    } label: {
                        Text(name)
                    }
                }
            }![](https://)
            .searchable(text: $searchText)
        }
    }

    var searchResults: [String] {
        if searchText.isEmpty {
            return names
        } else {
            return names.filter { $0.contains(searchText) }
        }
    }
}

The list displays fine but when I navigate to the child there is a gap at the top of the screen were the search textfield was. Is there a way to get rid of this gap? Is this a bug? The only way I can find around it is to re-create the search field using a regular textfield and a bunch of code that handles things like dismissing the keyboard when I tap away, showing cancel etc. Seems like such a basic thing

Thank you. I had tried that but on the navigation stack instead of the navigation link and given up on it, but putting it on the link does the trick.

Noticed other odd things too. Like if the sarchbar does not have focus its slight moved down, if you scroll down the screen it hides search and you get a blurred area over the top were the navigation stack text would be.