Picker in SwiftUI Form Selection

Question

capitalF OP

Created Apr ’23

Replies 1

Boosts 0

Participants 1

The picker in my code should default to no selection. But it always defaults to the first item in the array.

import SwiftUI

struct ContentView: View {
    
    @State private var eName:String = "Dave"
    @State private var eCategoryName:String = "Default"
    @State private var pickerITems: [String] = ["Dodge","Ford","Chevy","Toyota"]
    
    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("General")) {
                    TextField("Default", text: $eName)
                    
                    Picker("Category", selection: $eCategoryName) {
                        &#x2F;&#x2F;Text("Select").tag(Optional&lt;String>(nil))
                        ForEach(pickerITems, id: \.self) {
                            Text($0).tag($0)
                        }
                    }
                Text("Selected Item is: \(eCategoryName)")
                }
            }
        }
    }
}
    
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
code-block

I've tried setting the variable eCategoryName to an optional and tagging it with an optional string set to nil, but it still shows the default as the first item in the picker.

If I add Text("Default").tag("") the first item isn't selectable but still shows up initially checked.

The behavior I'm looking for is nothing (blank) in the picker area, and when tapped the list of array items pops up with nothing selected allowing the user to pick the one they want.

This is iOS 16 and from what I'm seeing this behavior is new in 16.

Thanks!

Answered by capitalF in 751026022

I may have gotten a solution to this. Its not entirely what I was looking for but it does work.

Picker("Category", selection: $eCategoryName) {
                        ForEach(cats, id: \.self) {
                            Text($0).tag($0)
                        }
                    }
                    &#x2F;&#x2F;.pickerStyle(.navigationLink)
                    .onAppear {
                        if !pickerLoaded {
                            if let firstCategory = cats.first {
                                eCategoryName = firstCategory
                                pickerLoaded.toggle()
                            }
                        }
                    }

The first time the picker is loaded the selected value is set to the first category in the array. Form validation works because now there's a value in the selected variable. Because the first one is selected, the fact that the first item is checked is irrelevant.

Thanks!

Boost

Answer 1

capitalF OP

Apr ’23

Accepted Answer

I may have gotten a solution to this. Its not entirely what I was looking for but it does work.

Picker("Category", selection: $eCategoryName) {
                        ForEach(cats, id: \.self) {
                            Text($0).tag($0)
                        }
                    }
                    &#x2F;&#x2F;.pickerStyle(.navigationLink)
                    .onAppear {
                        if !pickerLoaded {
                            if let firstCategory = cats.first {
                                eCategoryName = firstCategory
                                pickerLoaded.toggle()
                            }
                        }
                    }

The first time the picker is loaded the selected value is set to the first category in the array. Form validation works because now there's a value in the selected variable. Because the first one is selected, the fact that the first item is checked is irrelevant.

Thanks!

0