UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

SOLVED: Picker greyed out when using .pickerStyle(.navigationLink)

Forums > SwiftUI

@ivo-n  

Hey guys,

When I add a Picker to my form and apply .pickerStyle(.navigationLink), the Picker is greyed out/untappable in the simulator. Though when I don't apply the styling, it works fine. As suggested in below article from Paul, I tried wrapping the whole Picker in a NavigationStack, but this doesn't seem to solve the problem. Placing the Picker in a separate Section also has no effect. Does anyone have any ideas on how to approach this?

Thanks!

The article: https://www.hackingwithswift.com/quick-start/swiftui/how-to-fix-a-form-picker-or-a-navigationlink-that-isnt-tappable

With the styling:

Without the styling:

My code:

import SwiftUI

struct NewFileForm: View {
    @State private var newFileName = ""

    let folders = ["Unarchived Documents", "Sample Folder 1", "Sample Folder 2", "Sample Folder 3"]
    @State private var selectedFolder = "Unarchived Documents"

    var body: some View {
        Form {
            Section {
                HStack {
                    TextField("Type a file name...", text: $newFileName)
                    Button{
                        newFileName = ""
                    } label: {
                        Image(systemName: "xmark.circle.fill").foregroundColor(.gray)
                    }
                }

                Picker("Select a folder", selection: $selectedFolder) {
                    ForEach(folders, id: \.self) {
                        Text($0)
                    }
                }
                .pickerStyle(.navigationLink)
            }
            Section {
                Button("Add File") {
                    // Do something
                }.disabled(newFileName.isEmpty)
            }
            Section {
                Button("Cancel") {
                    // Do something
                }.tint(.red)
            }
        }
    }
}

1      

Hi. Well it seems working just fine if you place the Form inside the NavigationStack

 NavigationStack {
            Form {
                Section {
                    HStack {
                        TextField("Type a file name...", text: $newFileName)
                        Button{
                            newFileName = ""
                        } label: {
                            Image(systemName: "xmark.circle.fill").foregroundColor(.gray)
                        }
                    }

                    Picker("Select a folder", selection: $selectedFolder) {
                        ForEach(folders, id: \.self) {
                            Text($0)
                        }
                    }
                    .pickerStyle(.navigationLink)
                }
                Section {
                    Button("Add File") {
                        // Do something
                    }.disabled(newFileName.isEmpty)
                }
                Section {
                    Button("Cancel") {
                        // Do something
                    }.tint(.red)
                }
            }
        }

Should you need it to be working on your canvas as well, all you need to change your previews struct to have navigation stack.

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationStack {
            NewFileForm()
        }
    }
}

1      

@ivo-n  

That was the solution!! No idea how I didn't think to try that!

Thank you so much! @ygeras

1      

TAKE YOUR SKILLS TO THE NEXT LEVEL If you like Hacking with Swift, you'll love Hacking with Swift+ – it's my premium service where you can learn advanced Swift and SwiftUI, functional programming, algorithms, and more. Plus it comes with stacks of benefits, including monthly live streams, downloadable projects, a 20% discount on all books, and free gifts!

Find out more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.