SwiftUI: List rows get highlighted when interacting with other views if inside a TabView

Question

If a List is placed along with other views within a VStack which defines one page within a TabView with PageTabViewStyle, interacting (tap, long pressing) with the other views causes all (visible) rows of the List to get highlighted.

The following View demonstrates this behaviour: tapping or long pressing the Button or the purple area (Color View) will cause the rows in the List to get highlighted (Xcode 12.1 & iOS 14.1).

struct ContentView: View {
    var body: some View {
        TabView {
            VStack {
                List {
                    Text("Row 0")
                    Text("Row 1")
                    Text("Row 2")
                }
                .listStyle(InsetGroupedListStyle())
                Spacer()
                Button(action: { print("tapped")}, label: { Text("Button") } )
                    .padding(.vertical, 80)
                Spacer()
                Color.purple
            }
            
            Text("Second Page")
        }
        .tabViewStyle(PageTabViewStyle())
    }
}

I assume this is a bug and have already submitted feedback, but was wondering if there is a workaround while it's not fixed.

Answer 1

wondering if there is a workaround while it's not fixed.

After some investigation & testing the only workaround I see is to use scroll view instead

    TabView {
        VStack {
            ScrollView {        // << here
                Text("Row 0")
                Text("Row 1")
                Text("Row 2")
            }

Note: of course it might require some manual formatting & layout inside scroll view, but there is no such bug.