BLACK FRIDAY SALE: Save 50% on all my Swift books and bundles! >>

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)
            }
        }
    }
}

   

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()
        }
    }
}

   

@ivo-n  

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

Thank you so much! @ygeras

   

Hacking with Swift is sponsored by Guardsquare

SPONSORED AppSweep by Guardsquare helps developers automate the mobile app security testing process with fast, free scans. By using AppSweep’s actionable recommendations, developers can improve the security posture of their apps in accordance with security standards like OWASP.

Learn 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.