LazyVGrid child views don't update bindings unless they're part of the first rendered group - ios

Question

My app uses a LazyVGrid to display a collection of child views and I'm using a $selection bound to the child views to ensure that only one child view is selected at once. This "selection" just displays an overlay on the child view with buttons (so when a child view is selected, an overlay shows up, and if user selects a second child view, the overlay disappears from first child view and appears on second child view).
I simplified the problem down to the example shown below, where the $selection merely changes the text to red and ensures only one child view has red text at a time. This code is based on the default Xcode project.
Problem
The child view bindings only get updated if they're part of the first 8 child views, the first 8 that are rendered. Scrolling to further child views and selecting them causes the $selection variable to update properly in the main view, but only the first 8 child views register this change.
Video of Problem
https://youtube.com/shorts/7zBjwZwPkYA
This video shows that long pressing on the child views only works for the first 8. If you long press on view 12, for example, child views 1-8 register the changed $selection but no others do.
Code
struct ContentView: View {
#Environment(\.managedObjectContext) private var viewContext
#FetchRequest(
sortDescriptors: [NSSortDescriptor(keyPath: \Item.index, ascending: true)],
animation: .default)
private var items: FetchedResults<Item>
#State var selection: UUID?
#State var index: Int16 = 1
var body: some View {
NavigationView {
ScrollView {
LazyVGrid(columns: [(GridItem(.adaptive(minimum: 160)))], content: {
ForEach(items) { item in
ItemView(selection: $selection, item: item)
.aspectRatio(1.0, contentMode: .fill)
.padding(20)
}
.onDelete(perform: deleteItems)
})
}
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
EditButton()
}
ToolbarItem {
Button(action: addItem) {
Label("Add Item", systemImage: "plus")
}
}
}
Text("Select an item")
}
}
private func addItem() {
withAnimation {
let newItem = Item(context: viewContext)
newItem.index = index
index += 1
newItem.id = UUID()
do {
try viewContext.save()
} catch {
// Replace this implementation with code to handle the error appropriately.
// fatalError() causes the application to generate a crash log and terminate. You should not use this function in a shipping application, although it may be useful during development.
let nsError = error as NSError
fatalError("Unresolved error \(nsError), \(nsError.userInfo)")
}
}
}
private func deleteItems(offsets: IndexSet) {
withAnimation {
offsets.map { items[$0] }.forEach(viewContext.delete)
do {
try viewContext.save()
} catch {
// Replace this implementation with code to handle the error appropriately.
// fatalError() causes the application to generate a crash log and terminate. You should not use this function in a shipping application, although it may be useful during development.
let nsError = error as NSError
fatalError("Unresolved error \(nsError), \(nsError.userInfo)")
}
}
}
}
struct ItemView: View {
#Binding var selection: UUID?
#ObservedObject var item: Item
var body: some View {
VStack {
Spacer()
HStack {
Spacer()
if selection == item.id {
Text(String(item.index))
.font(.largeTitle)
.foregroundColor(.red)
} else {
Text(String(item.index))
.font(.largeTitle)
}
Spacer()
}
Spacer()
}
.background(Color.secondary)
.onLongPressGesture {
if selection == item.id {
selection = nil
} else {
selection = item.id
}
}
.onChange(of: selection, perform: { _ in
print("Child view \(String(item.index)) says selection changed")
})
}
}