Ghost view retained via tapGesture handler - macos

Question

I have a view that depends both on a #ObservedObject and a #State.
In a Button action, I modify them both, and this leads to a crash. If I modify only the #ObservedObject, then everything is OK (except, I don't get the intended behavior, of course).
public struct PointListEditorView: View {
#ObservedObject var viewModel: PointListEditorViewModel
#State var selectedCellIndex: Int = NO_CELL_SELECTED_INDEX
public var body: some View {
(...)
Button(action: {
let savedSelectedCellIndex = self.selectedCellIndex
self.selectedCellIndex = NO_CELL_SELECTED_INDEX // No crash if I remove this line
self.viewModel.removePointEditorViewModel(at: savedSelectedCellIndex)
},
label: (...)
What happens is that I have a crash in the body of a subview after the call to removePointEditorViewModel. This body goes through an array of objects that is modified by removePointEditorViewModel. removePointEditorViewModel triggers the #Published variables of the #ObservedObject.
The same thing happens if I invert both lines like this :
self.viewModel.removePointEditorViewModel(at: savedSelectedCellIndex)
self.selectedCellIndex = NO_CELL_SELECTED_INDEX//##
I first thought there would be some kind of strange interference between #State and #ObservedObject, but the first answers (thanks guys) pointed me in another direction.
Edit to provide more information
Edit 2 to make the title and the rest consistent with the current investigations
Here is the hierarchy of my views :
PointListEditorView
+ PointListEditorContentView
+ PointListEditorCellView (n times)
The PointListEditorView has this selectedCellIndex #State. This state is binded by PointListEditorContentView and PointListEditorCellView. It is modified by PointListEditorCellView through a tapGesture.
I have logged the entry and exit of the body computation. I have also logged the creation of PointListEditorCellView, and when I deleted things in my model. I have spotted some strange things.
**APP START**
Enter PointListEditorView body
Exit PointListEditorView body
Enter PointListEditorContentView body
count of pointEditorViewModels : 0
count of pointEditorViewModelsAndIndex : 0
End preparation PointListEditorContentView body
Exit PointListEditorContentView body
**ADD ONE CELL**
Enter PointListEditorContentView body
count of pointEditorViewModels : 1
map call with index : 0
count of pointEditorViewModelsAndIndex : 1
End preparation PointListEditorContentView body
Exit PointListEditorContentView body
created PointListEditorCellView : 35779A71-811F-42DD-A803-3C0E82C3CAD8
Enter PointListEditorCellView body : 35779A71-811F-42DD-A803-3C0E82C3CAD8
Exit PointListEditorCellView body
Enter PointListEditorView body
Exit PointListEditorView body
All this looks pretty normal to me. But now :
**SELECT THE CELL**
Enter PointListEditorView body
Exit PointListEditorView body
Enter PointListEditorContentView body
count of pointEditorViewModels : 1
map call with index : 0
count of pointEditorViewModelsAndIndex : 1
End preparation PointListEditorContentView body
Exit PointListEditorContentView body
Enter PointListEditorCellView body : 35779A71-811F-42DD-A803-3C0E82C3CAD8
<== Why the hell do we have that ???
This is the cell view created at previous step. It
should be forgotten and replaced by another one
as seen below
Exit PointListEditorCellView body
created PointListEditorCellView : 2EA80249-67B6-46A0-88C9-C5F5E8FEAE80
Enter PointListEditorCellView body : 2EA80249-67B6-46A0-88C9-C5F5E8FEAE80
Exit PointListEditorCellView body
**DELETE THE CELL**
Enter delete callback
Delete model element
#Published var modified, the view is notified
Exit delete callback
Enter PointListEditorView body
Exit PointListEditorView body
Enter PointListEditorContentView body
count of pointEditorViewModels : 0
count of pointEditorViewModelsAndIndex : 0
<== This shows there is nothing in the model, there should be
no cell view created - just like during app init
End preparation PointListEditorContentView body
Exit PointListEditorContentView body
Enter PointListEditorCellView body : 2EA80249-67B6-46A0-88C9-C5F5E8FEAE80
Fatal error: Index out of range: file /AppleInternal/BuildRoot/Library/Caches/com.apple.xbs/Sources/swiftlang/swiftlang-1103.8.25.8/swift/stdlib/public/core/ContiguousArrayBuffer.swift, line 444
<== This "ghost" cell is refering to a model elemnt that
has been deleted, os of course there is a crash, but why
does this cell still exist ???
After some more investigations, I managed to spot that the "retain" only happens when I have a tapGesture attached to the cell view. This is done in the PointListEditorContentView view this way :
struct PointListEditorCellView: View
var pointEditorViewModel: PointEditorBaseViewModel
var index: Int
#Binding var selectedCellIndex: Int
var body: some View {
VStack(spacing: 3.0) {
PointEditorView(pointEditorViewModel)
.onTapGesture {
if (self.selectedCellIndex == self.index) {
self.selectedCellIndex = NO_CELL_SELECTED_INDEX
} else {
self.selectedCellIndex = self.index
}
}
}
}
If I remove the .gesture, I don't see the ghost appear.

Answer 1

There is no interference between #State and #ObservedObject.
With the little code you provided, I would look hard into the
self.viewModel.removePointEditorViewModel(at: savedSelectedCellIndex)
is the index (savedSelectedCellIndex) valid for that model?

Answer 2

I finally found a solution.
From my point of view, this "ghost" views are the consequence of a bug inside SwiftUI. I came to this conclusion after flattening the view hierarchy, and suddenly, everything went fine.
I had the following code :
struct PointListEditorContentView: View {
#ObservedObject var viewModel: PointListEditorBaseViewModel
init(_ vm: PointListEditorBaseViewModel) {
self.viewModel = vm
}
var body: some View {
let pointEditorViewModels = viewModel.pointEditorViewModelsList()
let pointEditorViewModelsAndIndex = pointEditorViewModels.enumerated().map { (index, vm) in
return (vm: vm,
index: index)
}
return VStack(spacing: 3.0) {
ForEach(pointEditorViewModelsAndIndex, id: \.vm.id) { pointEditorViewModel in
PointListEditorCellView(pointListEditorViewModel: self.viewModel,
pointEditorViewModel: pointEditorViewModel.vm,
index: pointEditorViewModel.index)
}
PointListEditorDropableView(viewModel: viewModel,
positionOfDroppedItem: pointEditorViewModels.count)
}
.padding()
}
}
struct PointListEditorCellView: View {
#ObservedObject var pointListEditorViewModel: PointListEditorBaseViewModel
#ObservedObject var pointEditorViewModel: PointEditorBaseViewModel
var index: Int
var body: some View {
VStack(spacing: 3.0) {
PointListEditorDropableView(viewModel: pointListEditorViewModel,
positionOfDroppedItem: index)
.fixedSize(horizontal: false, vertical: true)
PointEditorView(pointEditorViewModel)
.shadow(color: (self.pointListEditorViewModel.selectedCellIndex == index ? Color.accentColor : Color.clear),
radius: (self.pointListEditorViewModel.selectedCellIndex == index ? 5.0 : 0.0))
.onTapGesture {
if (self.pointListEditorViewModel.selectedCellIndex == self.index) {
self.pointListEditorViewModel.selectedCellIndex = NO_CELL_SELECTED_INDEX
} else {
self.pointListEditorViewModel.selectedCellIndex = self.index
}
}
.onDrag {
let itemProvider = NSItemProvider()
itemProvider.registerObject(PointListEditorItemProvider(initialIndex: self.index),
visibility: .ownProcess)
return itemProvider
}
}
}
}
I just moved the content of the PointListEditorCellView body inside the ForEach like the following code, and everything went suddenly fine.
struct PointListEditorContentView: View {
#ObservedObject var viewModel: PointListEditorBaseViewModel
init(_ vm: PointListEditorBaseViewModel) {
self.viewModel = vm
}
var body: some View {
let pointEditorViewModels = viewModel.pointEditorViewModelsList()
let pointEditorViewModelsAndIndex = pointEditorViewModels.enumerated().map { (index, vm) in
return (vm: vm,
index: index)
}
return VStack(spacing: 3.0) {
ForEach(pointEditorViewModelsAndIndex, id: \.vm.id) { pointEditorViewModel in
VStack(spacing: 3.0) {
PointListEditorDropableView(viewModel: self.viewModel,
positionOfDroppedItem: pointEditorViewModel.index)
.fixedSize(horizontal: false, vertical: true)
PointEditorView(pointEditorViewModel.vm)
.shadow(color: (self.viewModel.selectedCellIndex == pointEditorViewModel.index ?
Color.accentColor : Color.clear),
radius: (self.viewModel.selectedCellIndex == pointEditorViewModel.index ? 5.0 : 0.0))
.onTapGesture {
if (self.viewModel.selectedCellIndex == pointEditorViewModel.index) {
self.viewModel.selectedCellIndex = NO_CELL_SELECTED_INDEX
} else {
self.viewModel.selectedCellIndex = pointEditorViewModel.index
}
}
.onDrag {
let itemProvider = NSItemProvider()
itemProvider.registerObject(PointListEditorItemProvider(initialIndex:
pointEditorViewModel.index),
visibility: .ownProcess)
return itemProvider
}
}
}
PointListEditorDropableView(viewModel: viewModel,
positionOfDroppedItem: pointEditorViewModels.count)
}
.padding()
}
}
I am documenting this in SO, so that if anybody has a different (and better explanation than just "it's a SwiftUI bug"), we can record the discussion.