SwiftUI NavigationLink highlight staying highlighted after returning to previous view

Question

I have a series of views in SwiftUI. One is a "Menu View" which consists of a List of NavigationLinks wrapped in a NavigationView.

The code is as follows.

var body: some View {
        NavigationView {
            List {
                HStack {
                    NavigationLink(destination: History(), isActive: $isHistoryViewActive) {
                    Image(systemName: "clock")                        
                    Text("History")                    
                    }
                }
                
                HStack {
                    NavigationLink(destination: Settings(), isActive: $isSettingsActive) {
                        Image(systemName: "gear")
                        Text("Settings")
                    }
                }
                
                HStack {
                    Image(systemName: "info.circle.fill")
                    Button(action: {
                        ...
                    }) {
                        Text("My Button")
                    }
                }
            }
        }
   }

The Settings view is as follows

var body: some View {
     List {
        ...
        Section(header: "Background Music") {
           Toggle("Play", isOn: $isBackGroundMusicOn)
        }
           
        Section(header: "Voice Setting") {
           HStack {
              NavigationLink(destination: VoiceList() {
                 Text(self.voiceNames[self.selectedVoice])
           }
        }
     }
}

And lastly, the VoiceList view is as follows:

var body: some View {
        List {
            ForEach(0 ..< VoiceList.voiceNames.count) {voiceIndex in
                HStack {
                    Button(action: {
                        voiceChanged(selectedVoice: voiceIndex)
                    }){
                        Text(VoiceList.voiceNames[voiceIndex])
                    }
                    Spacer()
                    Image(systemName: "checkmark")
                        .frame(alignment: .trailing)
                        .foregroundColor(.blue)
                        .isHidden(hidden: voiceIndex != selectedVoice)
                }
            }
        }
}

The problem that I am having is that when the app returns from the VoiceList view to the Settings view, the NavigationLink remains highlighted, as if it is still active, as shown in the attached screenshot. I honestly have no idea what may be causing this. Any ideas or insights are greatly appreciated.

score 6 · Answer 1 · answered Mar 13 '21 at 15:45

6

You can use a onReceive action on the List:

List {
    …
}.onReceive(NotificationCenter.default.publisher(for: UITableView.selectionDidChangeNotification)) {
    guard let tableView = $0.object as? UITableView,
          let selectedRow = tableView.indexPathForSelectedRow else { return }

    tableView.deselectRow(at: selectedRow, animated: true)
}

This will deselect the selected row.

Credit for the initial idea for this workaround goes to Pivaisan (from this Apple Developer thread).

answered Mar 13 '21 at 15:45

Koraktor

41,357
10
69
99

This is the only solution I could find that worked for me in Xcode 12.5 – rbaldwin Jun 19 '21 at 08:50
Nice. Thank you. – quan_bui Nov 11 '21 at 04:43

Wesley Brito · Answer 2 · 2020-12-23T17:30:35.000

0

I had the same problem working with List, to solve this i use: UITableViewCell.appearance().selectionStyle = .none, but as you can expected you will not have the selection aspect, so the right way is try to store the state of selection and clean before leave the screen but in my trys i have no idea how to do that.

Example:

struct YourApp: App {
    
    init() {
        UITableView.appearance().backgroundColor = .clear
        UITableViewCell.appearance().selectionStyle = .none
    }

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

edited Dec 23 '20 at 17:30

answered Dec 22 '20 at 16:58

Wesley Brito

143
9

This did not work for me. Where exactly did you place this line of code? – Peter Jacobs Dec 22 '20 at 23:17
In my @main app class i created a init() with this code. I'll edit the answer. – Wesley Brito Dec 23 '20 at 17:28
The background to your case is not needed. – Wesley Brito Dec 23 '20 at 17:31
Thanks for you answer. I don't actually have a @main app class in my app. I wonder if this could be placed alternatively in the SceneDelegate or HostingController. Otherwise, I will look into creating an app class. – Peter Jacobs Dec 24 '20 at 00:53
you can put it in your appDelegate too, don't need to create a new project, if you are using uikit life cycle. – Wesley Brito Dec 24 '20 at 16:03
I've tried that and still cannot get it work right. I'll keep tinkering. Thanks again! – Peter Jacobs Dec 25 '20 at 02:38
I also would have thought putting UITableViewCell.appearance().selectionStyle = .none in the init() of my View struct would have done the trick, but nope. – Peter Jacobs Dec 25 '20 at 02:40

SwiftUI NavigationLink highlight staying highlighted after returning to previous view

2 Answers2