SwiftUI List with Selection is Highlighting even in non-edit mode

Question

Created Sep ’22

Replies 4

Boosts 1

Views 3.7k

Participants 4

I recently updated my xcode and compiled my application developed in SwiftUI. The SwiftUI List started to behave different. List has Selection parameter for EditMode selection. However, now the list items are being selected and highlighted with grey highlighted color, even in a non-edit default mode.

Ideally, it should only select the list item in edit mode. It is how it worked before. But now when the list item is tapped in non-edit mode, it is getting selected.

Please, let me know how to make list with selection to highlight only in editmode.

import SwiftUI

struct ContentView: View {
   
  struct Ocean: Identifiable, Hashable {
    let name: String
    let id = UUID()
  }

  private var oceans = [
    Ocean(name: "Pacific"),
    Ocean(name: "Atlantic")
  ]
   
  @State private var multiSelection = Set<UUID>()
   
  var body: some View {
     
    NavigationView {
      VStack {
         
        List(oceans, selection: $multiSelection) { ocean in
          Text(ocean.name)
        }
        .toolbar { EditButton() }
      }
      .padding()
      .buttonStyle(PlainButtonStyle())
    }
  }
}

Boost

Answer 1

MSSwiftDev OP

Sep ’22

Apple changed this behaviour in iOS 16. So, now list with Selection is highlighting in non-edit mode. I realized that we have to live with it. So, I did a work around by setting a .listRowBackground of listItem to systemBackground.

(added the following changes to above code)

         List(oceans, selection: $multiSelection) { ocean in
          Text(ocean.name)
            .listRowBackground(Color(UIColor.systemBackground))
        }

so, now the grey highlight is avoided, and the systemBackground which is white is being displayed when tapped, making it appear as nothing is happening.

If there are any other solutions, let me know

1

Answer 2

meken OP

Jan ’23

This has probably been fixed, since I'm not able to replicate this 'problem'.

I actually came to this page, looking for this as a 'solution' however. I want to create a page similar to the iOS VPN configuration page. Those list items have a check mark indicating selection, without needing Edit mode. I guess I'll have to recreate that myself.

0

Answer 3

fumoboy007 OP

Dec ’23

I have the same use case where I only want rows to be selectable in edit mode. I solved this by checking whether edit mode was active before passing the selection binding to the List.

For example:

struct ContentView: View {
   let items: [Item]

   @Environment(\.editMode)
   private var editMode

   @State
   private var selectedItemIDs = Set<Item.ID>()

   var body: some View {
      NavigationStack {
         List(items, selection: isEditModeActive ? $selectedItemIDs : nil) { item in
            ItemView(item: item)
         }
         .toolbar {
            ToolbarItem(placement: .topBarTrailing) {
               EditButton()
            }
         }
      }
   }

   private var isEditModeActive: Bool {
      return editMode?.wrappedValue == .active
   }
}

This approach works. However, be aware that it does currently trigger a SwiftUI bug where the List no longer shows its multi-select checkmarks in edit mode. I reported the bug in FB13434460 (Open Radar ID 5544045669515264).

1

Answer 4

Noob1 OP

Aug ’24

You can avoid it with a little trick. add an onChnage modifier and if editMode is not active empty the list.

Add the following modifications:

.onChange(of: selectedItemIDs, processSelection)

func processSelection(_ oldValue: Set<Item.ID>, _ newValue: Set<Item.ID>) { if editMode == .inactive { self.selectedItemIDs = [] } }

0