Strange picker view hide animation in SwiftUI form

792 views Asked by At

I am trying to show and hide a picker view with an animation. The code for this is pretty simple and although the code works for other views, I can't get it to work with a picker view. Hiding the picker view results in a very odd animation as you can see in the gif below.

When I delete the first or last row in the list, the animation seems correct. Replacing Form {} with a normal List {} also solves the issue. So it only happens in the "inset grouped style".

Issue:

enter image description here

Code:

import SwiftUI

struct ContentView: View {
    static let options = ["One", "Two", "Three"]
    
    @State private var showPicker = false
    @State private var selectedOption = 0
    
    var body: some View {
        Form {
            Text("First row") // Removing this row or the last row solves the issue
            
            Button("Show Picker") {
                withAnimation {
                    showPicker.toggle()
                }
            }
            
            if showPicker {
                Picker("Picker", selection: $selectedOption) {
                    ForEach(0 ..< ContentView.options.count) {
                        Text(ContentView.options[$0])
                    }
                }.pickerStyle(InlinePickerStyle())
            }
            
            Text("Third row")
            Text("Last row") // Removing this row or the first row solves the issue
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Does anyone know how to solve this issue? I guess it's a SwiftUI bug so a workaround would be very helpful as well.

0

There are 0 answers