SwiftUI: Adding item creates gap in NavigationView Lists - macos

Question

I have a list which normally gets formatted nicely. When I update the array items and re-add the the element it introduces a big space in the list, adding additional height to some rows.
Here is the list:
Click the add button and the new item is added with additional height:
The strange thing is that if you play "track and field" with the add button and hit it many times quickly everything works OK.
Here is some code that demonstrates the problem:
import SwiftUI
var newIndex = 0
var newItems = ["Echo", "Tango", "Hotel", "Alpha", "November", "Kilo", "Yankee", "Oscar", "Uniform", "Indigo", "Romeo", "Whisky", "Lima", "Victor", "Charlie", "Foxtrot", "Delta", "Xray", "Papa", "Juliet", "Bravo", "Golf", "Quebec", "Mike", "Sierra", "Zulu"]
struct ContentView: View
{
#State var mainList:[String] = ["Echo", "Tango", "Hotel", "Alpha", "November", "Kilo", "Yankee", "Oscar", "Uniform", "Indigo", "Romeo", "Whisky", "Lima", "Victor", "Charlie", "Foxtrot", "Delta", "Xray", "Papa", "Juliet", "Bravo", "Golf", "Quebec", "Mike", "Sierra", "Zulu"].sorted()
#State var selectedItem:String? = "Echo"
var body: some View
{
NavigationView
{
List()
{
ForEach(mainList, id: \.self)
{item in
NavigationLink(destination: DetailView(item: item), tag: item, selection: $selectedItem, label:
{
Text("\(item)")
})
}
}
}
.toolbar
{
Button(action: {addNewItem()})
{
Label("Select", systemImage: "square.and.pencil")
}
}
}
func addNewItem()
{
if newIndex == newItems.count
{
newIndex = 0
}
let item = newItems[newIndex]
if mainList.contains(item)
{
mainList = mainList.filter({ $0 != item })
}
mainList.append(item)
selectedItem = item
newIndex += 1
}
}
struct DetailView: View
{
#State var item: String
var body: some View
{
Text(item)
}
}
I have found that in this case it is caused by the filter command, but I have seen this behaviour in many of my lists across my apps. I assume it is caused by removing and adding things to the same list.

Answer 1

try this:
Text("\(item)").fixedSize()
and attach the .toolbar to the List not the NavigationView.

Answer 2

It's quite a bug in Xcode Beta 1, 2 / macOS 12 Beta 1. The thing is, you use String itself as ID, which means if two strings are the same, they'll be treated as one item in List:
ForEach(mainList, id: \.self)
This may be what you want. However, in function addNewItem(), there comes:
mainList = mainList.filter({ $0 != item })
// ...
mainList.append(item)
A same item can be removed and appended. So the List will re-calculate the height, and move the same item from where it was to the bottom, which causes a bug.
One not perfect solution is that you can wrap the item in a struct which provides an explicit ID, like this:
struct Item: Identifiable {
let id = UUID()
let value: String
// Other properties in the future...
}
And each time you want to add a new item, a copy will be created:
items = items.filter { $0.value != item }
let newItem = Item(value: item)
items.append(newItem)
In this way, List won't see the old and the new as the same item and produce moving animation. Full code:
struct Item: Identifiable {
let id = UUID()
let value: String
// Other properties in the future...
}
var nextItemIndex = 0
let itemsRow = ["Echo", "Tango", "Hotel", "Alpha", "November", "Kilo", "Yankee", "Oscar", "Uniform", "Indigo", "Romeo", "Whisky", "Lima", "Victor", "Charlie", "Foxtrot", "Delta", "Xray", "Papa", "Juliet", "Bravo", "Golf", "Quebec", "Mike", "Sierra", "Zulu"]
struct ContentView: View {
#State private var items: [Item] = itemsRow.sorted().map { Item(value: $0) }
#State private var selected: UUID?
var body: some View {
NavigationView {
List {
ForEach(items) { item in
NavigationLink(destination: DetailView(value: item.value),
tag: item.id, selection: $selected) {
Text(item.value)
}
}
}
}
.toolbar {
Button(action: addNewItem) {
Label("Select", systemImage: "square.and.pencil")
}
}
}
}
extension ContentView {
private func addNewItem() {
let item = itemsRow[nextItemIndex]
nextItemIndex = (nextItemIndex + 1) % itemsRow.count
items = items.filter { $0.value != item }
let newItem = Item(value: item)
items.append(newItem)
selected = newItem.id
}
}
Let's see if it'll be fixed in the next macOS Beta.
UPDATE: It's fixed on macOS 12 Beta 3. Now you don't have to make a copy.