Picker Label not showing anymore

The Label for Picker is not being displayed anymore is there a way to fix this? The label used to show in earlier versions instead of the first option.

struct ExampleView: View {
    var fruits = ["Banana","Apple", "Peach", "Watermelon", "Grapes" ]
    @State private var selectedFruit = 0

    var body: some View {
        VStack {
            Picker(selection: $selectedFruit, label: Text("Select Favorite Fruit")) {
                ForEach(0..<fruits.count) {
                    Text(self.fruits[$0])
                }
            }

            Text("Your Favorite Fruit: \(self.fruits[selectedFruit])")
        }
        .pickerStyle(MenuPickerStyle())
    }
}

Did you ever figure this out? Seems like it's still an issue

+1 I can repo this issue too

I have the same problem

I see two separate issues here.

Firstly, the display of Picker labels, and Pickers themselves, is platform-specific.
This code will behave differently on iOS and macOS.
(Hint tag your questions, to make the Platform clear to helpers!)

On iOS, the label, which is Text("Select Favorite Fruit"), will not show.
On macOS, it will.

But is that what @RadApps is asking about? Or do they mean...

An obscure UI bug, where, after using the Picker to select, the selected item does not show correctly.

I can reproduce this.
It is fixable by adding some content above the Picker...
...or even by adding some padding to the top of the Picker, like this:

struct ExampleView: View {
    var fruits = ["Banana","Apple", "Peach", "Watermelon", "Grapes" ]
    @State private var selectedFruit = 0
    
    var body: some View {
        VStack {
            Picker("Select Favorite Fruit", selection: $selectedFruit) {
                ForEach(0..<fruits.count) {
                    Text(self.fruits[$0])
                        .padding()
                }
            }
            .padding(.top, 20) /// Workaround for obscure UI issue
            .pickerStyle(MenuPickerStyle())
            Text("Your Favorite Fruit: \(self.fruits[selectedFruit])")
        }
    }
}

I see the same problem using Xcode Version 13.1 (13A1030d)

And does my solution still work?

Has anyone found a solution to this yet?

Any fix?

Did anyone find a solution to this issue?

Thanks.

issue is still continuing

Still a problem in XCode 13.4.1 w/ MacOS 12.4! Reaaally obnoxious issue. (And no, the suggested bandaid solution does not work)

Try

``struct ExampleView: View { var fruits = ["Banana","Apple", "Peach", "Watermelon", "Grapes" ] @State private var selectedFruit = 0

var body: some View {
    VStack {
        Form {
        Picker(selection: $selectedFruit, label: Text("Select Favorite Fruit")) {
            ForEach(0..<fruits.count) {
                Text(self.fruits[$0])
            }
        }

        Text("Your Favorite Fruit: \(self.fruits[selectedFruit])")
    }
    .pickerStyle(MenuPickerStyle())
}

} }



Using the Picker in a Form renders the label as @Merlin52 pointed out. The Form really takes over your design though, which is nice but not when you need to customize it. Here's another sample with a screenshot:

struct ContentView: View {
    var fruits = ["Banana","Apple", "Peach", "Watermelon", "Grapes" ]
    @State private var selectedFruit = 0

    var body: some View {
        Form {
            // Variation 1
            Picker(selection: $selectedFruit, label: Text("Select Favorite Fruit")) {
                ForEach(0..<fruits.count, id: \.self) {
                    Text(self.fruits[$0])
                }
            }
            // Variation 2
            Picker(selection: $selectedFruit) {
                ForEach(0..<fruits.count, id: \.self) {
                    Text(self.fruits[$0])
                }
            } label: {
                HStack {
                    Text("Favorite Fruit")
                    Divider()
                    Text(fruits[selectedFruit])
                }
            }
            // Variation 3
            Menu {
                ForEach(0..<fruits.count, id: \.self) {
                    Text(self.fruits[$0])
                }
            } label: {
                HStack {
                    Text("Favorite Fruit")
                    Divider()
                    Text(fruits[selectedFruit])
                }
            }
        }
        .pickerStyle(.menu)
    }
}

Here's how everything looks like when I nest everything in a VStack instead of a Form:

Notice I added a Menu in there, which seems like the behaviour the OP is expecting. Shouldn't the Picker mimic that behaviour when modified with a MenuPickerStyle? This would mean the label parameter could be optional in the Picker initializer (so it can default to displaying the selected row). Repurposing a Menu as a picker is the painful alternative in the meantime.

@basememara Interesting. The result of your code looks totally different for me.

Simulator, iOS 15.5, iPhone 13

I prefer to have your kind of result.

If you embed the Picker inside of a Menu, it lets you create a custom label. I'm not sure if this was intended by SwiftUI, but it seems to work perfectly as expected.

Menu {
    Picker(selection: $selectedFruit, label: Text("Select Favorite Fruit")) {
        ForEach(0..<fruits.count, id: \.self) {
            Text(fruits[$0])
        }
    }
} label: {
    HStack {
        Text("Favorite Fruit")
        Divider()
        Text(fruits[selectedFruit])
    }
}

Source: https://stackoverflow.com/q/70835085

Picker Label not showing anymore
 
 
Q