奇怪的蓝色轮廓 SwiftUI List in EditMode on iOS 16

Question

After updating to Xcode 14 and iOS 16 on my devices the lists in my app seems broken in a number of ways. The problem I'm describing here seems to occur when using a List in a NavigationView that contains two views. When the List elements has a custom background using .listRowBackground and EditMode is activated, the selected row sometimes get a blue outline. It only occurs when I'm running on iPad (regular mode). It does not follow the selection of rows but seem to appear randomly over the list. Anyone else encountered this and have come up with a fix? Seems like a total bug to me. I will report it to Apple if I'm not getting explanation here.

The code to reproduce the error:

struct ContentView: View {

    let myStrings = ["string1", "string2", "string3"]
    @State var selection = Set<String>()

    var body: some View {
        NavigationView {
            List(selection: $selection) {
                ForEach(myStrings, id: \.self) { myString in
                    Text(myString)
                        .listRowBackground(Color(UIColor.secondarySystemGroupedBackground))
                }
            }
            .listStyle(.insetGrouped)
            .toolbar {
                EditButton()
            }
            EmptyView()
        }
    }
}

I'm running Xcode 14.2 and iPadOS 16.2.

EDIT: Seems like it only appears on iPad when having an external keyboard connected.

Answer 1

If you custom-color either the listRowBackground or the listRowSeparator, you'll get this result. It's SwiftUI showing the user what item was selected.

Remove the listRowBackground modifier and you'll see the list item itself colored in the tintColor, rather the the list item being bordered in the tintColor.