TEAM LICENSES: Save money and learn new skills through a Hacking with Swift+ team license >>

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      

Hacking with Swift is sponsored by String Catalog.

SPONSORED Get accurate app localizations in minutes using AI. Choose your languages & receive translations for 40+ markets!

Localize My App

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.