SwiftUI: A list with a DatePicker and Text mangles the display

Question

On iOS 15, if you display a List of VStacks with a Text and DatePicker as below

@main
struct WeirdListDatePickerProblem: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
 
struct ContentView: View {
    let listRows: [Int] = (0...100).map { $0 }
    var body: some View {
        List(listRows, id: \.self) { v in
            RowView()
        }
    }
}

struct RowView: View {
    @State var date: Date = Date()
    var body: some View {
        VStack {
            Text("If you remove this then the problem disappears")
            DatePicker("", selection: $date, displayedComponents: [.date])
                .labelsHidden()
        }
    }
}

then the screen is mangled as below.

It becomes worse the more you scroll. This has been seen on the simulator and on a real device using iOS 15.5 with Xcode 13.4.1.

If you remove the Text then the problem disappears.

How, on iOS 15, can you display list items with a Text and DatePicker without the above happening?

Answer 1

try this, works for me:

the issue goes away for me, when I add a .frame(width: 333, height: 88) to the RowView(), or its VStack{...}. It seems the List view needs a height for its rows to work properly. I also noticed it is much faster to scroll with the added frame.