SwiftUI popover not updating binding

Question

Created Jan ’24

Replies 3

Boosts 0

Participants 3

I'm teaching myself SwiftUI, and have been generally impressed so far, but I've bumped into an issue with popovers that shows a gap in my understanding, and I've been unable to find a good solution to the issue (or information to help me further my understanding).

My goal is simple. I'd like to create a custom NumberPicker view which displays a number as plain text, but when clicked, puts up a pop-up which lets you select a new value from a provided list of values. (And, ideally, it would handle the case where selection = nil, displaying an empty string, but I can work on that bit later.)

I've got the basics in place, but my issue is that the selected value is not getting set back in the View's @Binding var after I make my selection.

I've included below a TestPicker that shows the problem (with helpful print() statements. With this View, no matter what value I select in the Preview Pane, the View's 'selection' var value doesn't change.

My question(s) are:

What am I doing wrong? Have I just made a simple, newbie mistake?
Can you offer pointers to good places to search when trying to work through problems such as this? Places with SwiftUI examples, etc.?

import SwiftUI

struct TestPicker: View {
    @Binding var selection: Int
    let range = 1...10
    
    @State private var showPicker = false

    var body: some View {
        var _ = print("Initial selection: \(selection)")
        
        Text("\(selection)")
            .onTapGesture {
                showPicker = true
            }
            .padding()
            .popover(isPresented: $showPicker) { [$selection] in
                VStack {
                    Picker("Select Number", selection: $selection ) {
                        ForEach(range, id: \.self) { num in
                            Text("\(num)").tag(num)
                        }
                    }
                    .pickerStyle(WheelPickerStyle())
                    .frame(width: 120, height: 200)
                    .onDisappear {
                        var _ = print("Picker.onDisappear() selection: \(selection)")
                    }
                }
            }
        Divider()
        Text("The selected value is \(selection)")
    }
}

#Preview {
    @State var myNum: Int = 8
    return TestPicker(selection: $myNum)
}

Boost

Answer 1

ssmith_c OP

Jan ’24

where are you using the TestPicker (aside from in its Preview)?

it works for me when used in the ContentView below. I built this for iOS and ran it in a iPhone 15 simulator. To dismiss the picker, swipe down on the horizontal grey bar near the top of the screen.

struct ContentView: View {
    @State private var selection = 1
    var body: some View {
        VStack {
            TestPicker(selection: $selection)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Lots of SwiftUI examples on Paul Hudson't site, for example https://www.hackingwithswift.com/quick-start/swiftui

1

Answer 2

thackerdynasty OP

Jan ’24

Firstly, you don't need var _ = print(). You can just use print(). I would also try removing "[$selection] in" on the popover. From my experience it hasn't been needed.

0

Answer 3

jmcdonald_mcds OP

Jan ’24

Re: to ssmith_c:

I'm using it in another view and I get the same behavior there, but right now I'm running that other view in the Preview Pane. I wonder if this is a bug specific to Preview.
I'll give it a try in an iPhone simulator when I get done with work today. If it works, I'll let ya know.

And many thanks for the response, and the pointer. I'm just starting out with learning SwiftUI, but I've got decades of experience as a Software Engineer, so I very much like to dig through working examples to learn when I can, instead of bugging folks with questions. :-)

0