NEW: My new book Pro SwiftUI is out now – level up your SwiftUI skills today! >>

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 Essential Developer

SPONSORED Join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer! Hurry up because it'll be available only until October 1st.

Click to save your free spot now

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.