SwiftUI List .onDelete: Index out of range

Question

I have a simple list populated using a view-model:

@ObservedObject var sdvm = StepDataViewModel()

[...]

List {
    ForEach (vm.steps.indices, id: \.self) { idx in
        TheSlider(value: self.$vm.steps[idx].theValue, index: self.vm.steps[idx].theIndex)
    }
    .onDelete(perform: { indexSet in
        self.vm.removeStep(index: indexSet) // <--- here
    })
}

Where the viewmodel is this:

class StepDataViewModel: ObservableObject {
    @Published var steps: [StepData] = []

    func removeStep(index: IndexSet) {
        steps.remove(atOffsets: index)
    }    
}

and the StepData is this one:

struct StepData: Equatable, Hashable {
    var theIndex: Int
    var theValue: Double
}

TheSlider:

struct TheSlider: View {
    @Binding var value: Double
    @State   var index: Int

    var body: some View {
        ZStack {
            Slider(value: $value, in: 0...180, step: 1)
                .padding()
            HStack {
                Text("[\(index)]")
                    .font(.body)
                    .fontWeight(.black)
                    .offset(y: -20.0)

                Text("\(Int(value))")
                    .offset(y: -20.0)
            }
        }
    }
}

Now, .onDelete is obviously attached to the List, so I receive the correct row index when press delete.
For what reason the app crash for index-out-of-bound? Is the list that pass me the index, or not?

I receive this error:

Fatal error: Index out of range: file Swift/ContiguousArrayBuffer.swift, line 444

Can be caused by the direct array reference in the "TheSlider"? If yes, how I can change it using theValue as Binding updatable?

Why would you need **Hashable** and **Identifiable** together? if you are going use **\.self**, then you just need **Hashable**. — ios coder, Mar 19 '21 at 17:23
At first I need to clean up the codes as much as we can, therefore i am asking. — ios coder, Mar 19 '21 at 17:26
I removed `Identifiable` from the question, of course crash happens the same. — elp, Mar 19 '21 at 17:28
Also using TheSlider a custom slider with binding value? Is code is the same, is not necessary to post... — elp, Mar 19 '21 at 17:37
Does this answer your question? [Deleting list elements from SwiftUI's List](https://stackoverflow.com/q/63079221/8697793) — pawello2222, Mar 19 '21 at 17:51
Partially, because I need to delete a row from list and using your hint is not possible. If size change there is no problem, the problem is when size was reduced by swipe the row. — elp, Mar 19 '21 at 17:59
@elp: Do you have to use swipe delete on List? because it has bug! I have better coding if you want to delete with tap on trash icon on row. — ios coder, Mar 19 '21 at 18:45

score 1 · Accepted Answer · answered Mar 19 '21 at 18:11

This is a SwiftUI bug reported in Deleting list elements from SwiftUI's List.

The solution is to use the extension from here that prevents accessing invalid bindings:

struct Safe<T: RandomAccessCollection & MutableCollection, C: View>: View {
   
   typealias BoundElement = Binding<T.Element>
   private let binding: BoundElement
   private let content: (BoundElement) -> C

   init(_ binding: Binding<T>, index: T.Index, @ViewBuilder content: @escaping (BoundElement) -> C) {
      self.content = content
      self.binding = .init(get: { binding.wrappedValue[index] }, 
                           set: { binding.wrappedValue[index] = $0 })
   }
   
   var body: some View { 
      content(binding)
   }
}

List {
    ForEach(vm.steps.indices, id: \.self) { index in
        Safe(self.$vm.steps, index: index) { binding in
            TheSlider(value: binding.theValue, index: vm.steps[index].theIndex)
        }
    }
    .onDelete(perform: { indexSet in
        self.vm.removeStep(index: indexSet)
    })
}

I have no idea on how you reached this "Safe" solution but it works well. I need to study a lot. Thanks! — elp, Mar 19 '21 at 21:05

score 0 · Answer 2 · answered Mar 19 '21 at 19:16

I believe this is the same problem addressed here which is a loss of consistency between the indices in the ForEach loop and what is deleted. Add a separate array for the indices and use it for iteration and deletion like this:

    @ObservedObject var vm = StepDataViewModel()
    @State var indices: [Int] = Array(0..<3)
    
    var body: some View {
        
        List {
            ForEach (indices, id: \.self) { idx in
                TheSlider(value: self.$vm.steps[idx].theValue, index: self.vm.steps[idx].theIndex)
            }
            .onDelete(perform: { indexSet in
                indices.remove(atOffsets: indexSet) // <--- here
            })
        }

You will need some additional code to handle deletion of the corresponding items in the model

SwiftUI List .onDelete: Index out of range

2 Answers2

Linked