'Combining Navigation Bar, TabView and searchable causes the NavigationBar UI issue with lists

Combining Navigation Bar, TabView and searchable causes the NavigationBar and Search InputField to stay stationary when scrolling up on the second selected tab.

If I run the code below and first click on the Bookmark tab and scroll the list up, I get the desired results as shown in Figure 1.

If I immediately click the Home tab after the Bookmark tab and scroll the list up, I get an undesirable effect of the list displaying underneath the navigation header as shown in Figure 2.

The order that you click on the tabs produces different effects, and the position you last left the list before going to the next tab also has some strange influence on the behavior.

I need to use the TabView because it "remembers" the position of the list when you move from tab to tab. Creating my own tab control causes the list to reset everytime its displayed and I understand why. We also need to wrap the TabView under the NavigationView because our application subviews need to display their own tabs.

My questions, what am I doing wrong that is causing these inconsistencies in the navigation header. I have tried putting each list in it's own Stack but no joy, same issue keeps happening.

Any assistance would be greatly appreciated, we are currently blocked on our navigation design because of this anomaly. Hoping it's out fault so we can correct it.

Figure 1Figure 2

----> the complete code <-------------------------------------------------------

struct ContentView: View {
    @State var selectedTab: String = "Home"
    @State var searchText: String = ""
    
    var body: some View {
        NavigationView {
            TabView(selection: $selectedTab) {
                ListView(itemTitle: "Home List", itemCount: 50)
                    .tabItem {
                        Image(systemName: "house.fill")
                        Text("Home")
                    }.tag("Home")
             
                ListView(itemTitle: "Bookmark List", itemCount: 20)
                    .tabItem {
                        Image(systemName: "bookmark.circle.fill")
                        Text("Bookmark")
                    }.tag("Bookmark")
             
                Text("Profile Tab")
                    .tabItem {
                        Image(systemName: "person.crop.circle")
                        Text("Profile")
                    }.tag("Profile")
            }
            .navigationTitle(selectedTab)
        }
        .searchable(text: $searchText)
        .onSubmit(of: .search) {
            // Do something
        }
    }
}

struct ListView: View {
    var itemTitle: String
    var itemCount: Int
    var body: some View {
        List(){
            ForEach(1...itemCount,id: \.self){ i in
                NavigationLink(destination: ListViewDetailView("\(itemTitle) \(i)")) {
                    VStack(alignment: .leading){
                        Text("\(itemTitle) \(i)").padding()
                    }
                }
            }
        }
    }
}

struct ListViewDetailView: View {
    var text:String
    
    init(_ text: String){
        self.text = text
    }
    
    var body: some View {
        Text(text).navigationTitle(Text("\(text) Detail"))
    }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source