Why is SwiftUI picker in form repositioning after navigation?

swiftui picker action
swiftui picker not working
swiftui picker multiple selection
swiftui picker onchange
swiftui popup picker
swiftui picker ontapgesture
swiftui custom picker
swiftui picker style

After clicking the picker it navigates to the select view. The item list is rendered too far from the top, but snaps up after the animation is finished. Why is this happening?

Demo: https://gfycat.com/idioticdizzyazurevase

I already created a minimal example to rule out navigation bar titles and buttons, form sections and other details:

import SwiftUI

struct NewProjectView: View {

    @State var name = ""

    var body: some View {
        NavigationView {
            Form {
                Picker("Client", selection: $name) {
                    Text("Client 1")
                    Text("Client 2")
                }
            }
        }
    }
}

struct NewProjectView_Previews: PreviewProvider {
    static var previews: some View {
        NewProjectView()
    }
}

This happens in preview mode, simulator and on device (Xcode 11.2, iOS 13.2 in simulator, 13.3 beta 1 on device).

The obviously buggy behavior can be worked around when forcing the navigation view style to stacked:

NavigationView {
    …
}.navigationViewStyle(StackNavigationViewStyle())

This is a solution to my problem, but I won‘t mark this as accepted answer (yet).

  1. It seems to be a bug, even if it may be triggered by special circumstances.
  2. My solution won‘t work if you need another navigation view style.
  3. Additionally, it won‘t fix the horizontal repositioning mentioned by DogCoffee in the comments.

Pickers in forms, Tip: Because pickers in forms have this navigation behavior, it's important you wrap them in a NavigationView on iOS otherwise you'll find that� Date picker style. In the next sections, we’ll be discussing a few of these picker styles. Navigation view style. Here’s an example of the navigation view-picker style which is embedded in a form.

In my opinion, it has something to do with the navigation bar. In default (no mention of .navigationBarTitle extension), the navigation display mode is set to .automatic, this should be amend to .inline. I came across another post similar to this and use their solution to combine with yours, by using .navigationBarTitle("", displayMode: .inline) should help.

import SwiftUI

struct NewProjectView: View {

    @State var name = ""

    var body: some View {
        NavigationView {
            Form {
                Picker("Client", selection: $name) {
                    Text("Client 1")
                    Text("Client 2")
                }
            }
            .navigationBarTitle("", displayMode: .inline)
        }
    }
}


struct NewProjectView_Previews: PreviewProvider {
    static var previews: some View {
        NewProjectView()
    }
}

SwiftUI Pickers And NavigationView Issues : SwiftUI, BUG: 1 The Picker inside the Form repositions itself when the NavigationView UNLESS the RedditOS, an open source SwiftUI macOS Reddit client If both people are interested after the 2 minute date, they can stay connected to chat. What SwiftUI wants to do – which is also why it’s added the gray disclosure indicator on the right edge of the row – is show a new view with the options from our picker. To do that, we need to add a navigation view, which does two things: gives us some space across the top to place a title, and also lets iOS slide in new views as needed.

Until this bug is resolved another way to work around this issue while retaining the DoubleColumnNavigationViewStyle for iPads would be to conditionally set that style:

let navView = NavigationView {
    …
}
if UIDevice.current.userInterfaceIdiom == .pad {
    return AnyView(navView.navigationViewStyle(DoubleColumnNavigationViewStyle()))
} else {
    return AnyView(navView.navigationViewStyle(StackNavigationViewStyle()))
}

SwiftUI Picker View - Use Pickers and Form in SwiftUI, We will talk about ForEach, navigation, picker, tag, and SwiftUI forms. if you googled the Duration: 9:06 Posted: Jul 1, 2019 Thanks for this great ressource on SwiftUI, I'm just starting out, but this looks awesome. I'm a bit stumped on the WeSplit Tutorial 8/10 : The picker does not seem to behave the way it should, or at least the way Paul describes it. Despite adding the NavigationView, I still see the disclosure arrow and taping on the picker does nothing

Thanks for this thread everyone! Really helped me understand things more and get a hold of one of my problems. To share with others, I was having this problem to but I was also having this problem when I set a section to appear in a if/else statement set on a section with a toggle. When the toggle was activated it would shift the section header horizontally a few pixels.

The following is how I fixed it

Section(header: Text("Subject Identified").listRowInsets(EdgeInsets()).padding(.leading)) {
                Picker(selection: $subIndex, label: Text("Test")) {
                    ForEach(0 ..< subIdentified.count) {
                        Text(self.subIdentified[$0]).tag($0)
                    }
                }
            .labelsHidden()
            .pickerStyle(SegmentedPickerStyle())

I'm still having horizontal shift on my picker selection view and not sure how to fix. I created another thread to received input. Thanks again! SwiftUI Shift Picker Text Horizontal

ios - 为什么导航后表单中的SwiftUI选择器会重新定位?, 为什么导航后表单中的SwiftUI选择器会重新定位? Why is SwiftUI picker in form repositioning after navigation? 发表于 2019-11-08 20:55:22. 活跃于 2019-11-21� The navigation bar should contain a button the waiter can use to add a new order. we’ll be using the Form view in SwiftUI and a picker with the different pizza

Pickers in SwiftUI with State & Form — How to use PickerViews In , UIKit has UIPickerViews, SwiftUI has Pickers. string data we can populate our SwiftUI Picker view with; A navigation view to set us up nicely. SwiftUI offers some predefined styles for each of these views, but you can also create your own. Unfortunately, not all styles are customizable. For example, on iOS, it is perfectly ok to create a custom style for a button or a toggle, but styling a picker, to the best of my knowledge, is not possible.

Maxcodes - Software, SwiftUI Picker View - Use Pickers and Form in SwiftUI - Swift 5 & Xcode 11 - 2019 to use WebKit in SwiftUI and UIViewRepresentable, State, and navigation. Apple’s SwiftUI documentation covers a lot of the basics of SwiftUI. the default behavior of a Picker inside a Form is to take you to another where you this navigation will not occur

为什么导航后表单中的SwiftUI选择器会重新定位?, import SwiftUI struct NewProjectView: View { @State var name = "" var body: some View { NavigationView { Form { Picker("Client", selection: $name)� Oct 14, 2018: Updated by Adrien Villez for the latest Xcode 10! In this tutorial, we’ll walk though a basic implementation example of the UIPickerView which is a UI element that can be used to make a selection from multiple choices (similar to what a dropdown does for a webpage).

Comments
  • There is a fairly recent video on YouTube demonstrating basic forms in SwiftUI, it‘s working there, so I guess it‘s not a bug in SwiftUI itself: youtu.be/Ho88Eid9gi0?t=573
  • Same issue - very annoying. If you use inline style for nav bar it goes away.
  • ... also the text in the cells jumps - about 4 px to the right
  • @DogCoffee: I debugged the horizontal jumping to be changing insets. This can be fixed by explicitly setting them with .listRowInsets().
  • I ran into this issue too when i was playing around on Xcode 11.4.1. I decided to download the latest Xcode beta (11.5 beta 2) / iOS 13.5 to see if it had fixes in for it. iPhones with notches (like 11) don't reposition anymore, but iPhones without notches (SE 2) still have this behavior. Hopefully apple fixes this in later betas / 11.5 release.
  • This also is useful if your app runs on iPads, otherwise your modal views present as a master - detail split view.
  • This works around the issue, but it also changes the title style which is not desired in my case.