SwiftUI - confirmationDialog has abnormal behavior when inside a LazyVStack

Question

I have a ScrollView with a LazyVStack which holds n subviews. Each subview has a button which will present a confirmation dialog, the confirmation dialog is created inside the child.

the confirmation dialog for some reason doesn't work after seeing 3 (more or less) subviews, you could press the button many times but won't immediately show the dialog, if you wait around while scrolling, suddenly every dialog will popup one after another.

video testing

Code for testing:

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 50) {
                ForEach(0...100, id: \.self) { _ in
                    SubView()
                }
            }
        }
        .padding()
    }
}


struct SubView: View {
    
    @State var flag = false
    
    var body: some View {
        ZStack(alignment: .bottom) {
            RoundedRectangle(cornerRadius: 30)
                .frame(height: 500)
                .foregroundColor(.gray)
                .overlay {
                    Button("Press me") {
                        flag.toggle()
                    }
                    .confirmationDialog("", isPresented: $flag, actions: {
                        Button(role: .none) {
                           print("option 1")
                        } label: {
                            Text("option 1")
                        }
 
                        Button(role: .cancel) {
                            flag = false
                        } label: {
                            Text("cancel")
                        }
                    })
                }
        }
    }
}

Answer 1

Approach

• Move the confirmationDialog outside the LazyVStack

Code

struct ContentView: View {
    @State private var flag = false
    
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 50) {
                ForEach(0...100, id: \.self) { _ in
                    SubView(flag: $flag)
                }
            }
            .confirmationDialog("", isPresented: $flag) {
                Button(role: .none) {
                    print("option 1")
                } label: {
                    Text("option 1")
                }
                
                Button(role: .cancel) {
                    flag = false
                } label: {
                    Text("cancel")
                }
            }
        }
        .padding()
    }
}

struct SubView: View {
    
    @Binding var flag: Bool
    
    var body: some View {
        ZStack(alignment: .bottom) {
            RoundedRectangle(cornerRadius: 30)
                .frame(height: 500)
                .foregroundColor(.gray)
                .overlay {
                    Button("Press me") {
                        flag.toggle()
                    }
                }
        }
    }
}