UITableView - Destructive UIContextualAction does not reload data - ios

Question

I'm trying to use the iOS 11 way to add swipe actions in a table view row. I want to add an action to delete a row.
My test table view displays numbers from 0 to 9, the data source is a simple array of integers, called numbers:
class ViewController: UIViewController {
var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
}
When I select a row, I print the associated value of numbers:
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
print(numbers[indexPath.row])
tableView.deselectRow(at: indexPath, animated: true)
}
I implement the new delegate trailingSwipeActionsConfigurationForRowAt as below:
func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
let delete = UIContextualAction(style: .destructive, title: "Delete") { (_, _, completionHandler) in
self.numbers.remove(at: indexPath.row)
completionHandler(true)
}
return UISwipeActionsConfiguration(actions: [delete])
}
When I swipe on a row, the deletion works fine. But, and that's my problem, when I select another row after the deletion, the associated IndexPath is wrong...
Example:
I select the first row, the value printed is 0: OK.
I delete the first row.
I select the new first row, the value printed is 2, because the IndexPath passed in parameter is row 1, instead of row 0: not OK.
What do I do the wrong way?

Answer 1

It is important to remember that there's a model, the numbers array in your case, and a view, the cells that are displayed. When you remove the element from numbers you are only updating the model.
In most cases, as you have it coded, you would get an error shortly thereafter because the model is out of sync with the view.
However, my testing indicates that when the style is .destructive and you pass true to completionHandler Apple is sort of removing the row for you. Which is why you are seeing the row disappear. But there's something not quite right about it and I can't find any documentation on it.
In the meantime, just do this:
self.numbers.remove(at: indexPath.row)
tableView.deleteRows(at: [indexPath], with: .automatic)
completionHandler(true)
And always remember that if you change with the model you need to update the view.

Answer 2

It is very confusing that calling the completion handler with true updates the view by removing the cell, but does not update the table view's notion of which which remaining cells are at which index path.
The documentation around this is very scant, so I ran a test and found that calling the completion handler with true FIRST then calling deleteRows results in the "most correct" animation.
Batch updates with completion called first:
tableView.beginUpdates()
completion(succeeded)
users.remove(at: indexToRemove)
tableView.deleteRows(at: [indexPath], with: .automatic)
tableView.endUpdates()
Batch updates with completion called second:
tableView.beginUpdates()
users.remove(at: indexToRemove)
tableView.deleteRows(at: [indexPath], with: .automatic)
completion(succeeded)
tableView.endUpdates()
Completion called first:
completion(succeeded)
users.remove(at: indexToRemove)
tableView.deleteRows(at: [indexPath], with: .automatic)
Completion called second
users.remove(at: indexToRemove)
tableView.deleteRows(at: [indexPath], with: .automatic)
completion(succeeded)
Image mid-animation:
The right panels both have the remaining cell partially covered by the cell that is being removed, while the bottom left panel introduces a white view from somewhere.