NavigationLink/Picker

I have a form container with a Navigation Stack at the top level. In a section I have a Navigation link followed by Picker(s) . On its own the navigation link works correctly but when a HStack with Text and Picker is added the navlink breaks . When the link is selected the picker list is presented. It seems others have had this issue which is usually solved by adding the NavigationStack , which is already at the top level. Any guidance is appreciated ( or work around - I added a section between the link and picker but that didn't help ) Joel

Answered by Vision Pro Engineer in 793576022

Hi @drjoel could you please post a small, focused, code snippet that shows the issue? Ideally this will be a few lines of code that I can put into my own project in order to try to reproduce this and see what the issue is here. Thank you!

Sydney

Accepted Answer

Hi @drjoel could you please post a small, focused, code snippet that shows the issue? Ideally this will be a few lines of code that I can put into my own project in order to try to reproduce this and see what the issue is here. Thank you!

Sydney

Hi Sydney, There is an initial NavigationStack in the leading view ;

VStack(alignment: .leading) { HStack { NavigationLink(destination: MultiSelectPartialView(selectedProcedures: $selectedPartial)) { Text("Partial") } .frame(width: 75) Text("Selected are:") Text(selectedPartial.joined(separator: ",")) .foregroundColor(Color(.red)) .font(.subheadline) Spacer() }

                    HStack {
                        Text("Base Material (Non-Metal)")
                            .font(.subheadline)
                        
                        Picker("",selection: $selectedBaseMaterial) {
                            ForEach(basematareials, id: \.self ) { base in
                                Text(base.description)
                                    .tag(base.description)
                            }
                        }
                        .frame(width: 150)
                        .pickerStyle(.automatic)
                        .bold()
                        .foregroundColor(Color(.red))
                        Spacer()
                        Text("Metal Framework")
                            .font(.subheadline)
                        Picker("",selection: $selectedMetal) {
                            ForEach(metalFramework, id: \.self ) { metal in
                                Text(metal.description)
                                    .tag(metal.description)
                            }
                        }
                        .frame(width: 150)
                        .pickerStyle(.automatic)
                        .bold()
                        .foregroundColor(Color(.red))
                    }

@drjoel thanks for posting that!

Two options here.

  1. Use 2 sections instead of one. If the first HStack is in one Section and the second HStack is in a second Section, the navigation links will work.
  2. Use a List instead of a VStack

Best, Sydney

Thanks Sydney,

I did try to split the sections but didn't seem to work , but will try again.
Didn't think of list but will try that as well.
The NavigationLink is for a multiselect list so may rethink the interface for multiple selections Joel

Tested both

  1. Substituted List for Stack, no errors but same issue
  2. Separated by sections ( code given ) , no errors but same issue

VStack(alignment: .leading) { Section(header: Text("List")){ // Test section 1 HStack { NavigationLink(destination: MultiSelectPartialView(selectedProcedures: $selectedPartial)) { Text("Partial") } .frame(width: 75) Text("Selected are:") Text(selectedPartial.joined(separator: ",")) .foregroundColor(Color(.red)) .font(.subheadline) Spacer() }

                Section(header: Text("Pickers")) {  // Test section 2
                    HStack {
                        Text("Base Material (Non-Metal)")
                            .font(.subheadline)
                        
                        Picker("",selection: $selectedBaseMaterial) {
                            ForEach(basematareials, id: \.self ) { base in
                                Text(base.description)
                                    .tag(base.description)
                            }
                        }
                        .frame(width: 150)
                        .pickerStyle(.automatic)
                        .bold()
                        .foregroundColor(Color(.red))
                        //Spacer()
                        Text("Metal Framework")
                            .font

Both recommendations I couldn't get to work. Switched to toggle controls which was accepted by SwiftUI. Just curious why the navlink is not contained and leaks into the picker control

VStack(alignment: .leading) {
                   /* HStack {  // NOT  Working
                        NavigationLink(destination: MultiSelectPartialView(selectedProcedures: $selectedPartial)) {
                            Text("Partial")
                        }
                        .frame(width: 75)
                        Text("Selected are:")
                        Text(selectedPartial.joined(separator: ","))
                            .foregroundColor(Color(.red))
                            .font(.subheadline)
                        Spacer()
                    }*/
                    HStack {
                        Text("Selected are:")
                            .font(.subheadline)
                        Toggle("Upper", isOn: $upper)
                            .font(.subheadline)
                        Toggle("Lower", isOn: $lower)
                            .font(.subheadline)
                        Toggle("Both", isOn: $both)
                            .font(.subheadline)
                        Toggle("Custom Tray", isOn: $customTray)
                            .font(.subheadline) 
```Joel 

With toggle controls if the text toggle description is clicked the initial picker list is displayed. No problem if the actual toggle is clicked.
Is there an issue in mixing controls in a form container ? A specific order ?

NavigationLink/Picker
 
 
Q