SwiftUI - confirmationDialog has abnormal behavior when inside a LazyVStack - swift

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()
}
}
}
}
}