Can't Select SwiftUI TextField

Question

I'm not able to select and enter any text into my text fields. If I move them out of their current VStack and put them into the first VStack they work as expected. The buttons below them work just fine where they are so it doesn't seem as though the text fields are behind anything.

Here is my current layout.

import SwiftUI

struct ContentView: View {
    @State var emailAddress = ""
    @State private var password = ""
    @State var showingAlert = false
    @State var error = ""
    @State var showCollections = false

    var body: some View {
        ZStack(alignment: .top) {
            LinearGradient(gradient: Gradient(colors: [.blue, .white,]), startPoint: .bottom, endPoint: .top)
            .edgesIgnoringSafeArea(.all)

            VStack(alignment: .leading) {
                Text("Title")
                    .font(.largeTitle)
                    .frame(width: UIScreen.main.bounds.size.width - 40, height: 100, alignment: .center)
                    .foregroundColor(.blue)

                ZStack(alignment: .top) {
                    Color.white
                    VStack(alignment: .leading) {

                        TextField("Email", text: $emailAddress, onEditingChanged: { edit in

                        }, onCommit: {

                        })
                            .frame(width: UIScreen.main.bounds.size.width - 80, height: 41, alignment: .center)
                            .textFieldStyle(.plain)
                            .background(Color.init(red: 211.0/255.0, green: 211.0/255.0, blue: 211.0/255.0))
                            .textContentType(.emailAddress)
                            .cornerRadius(10)
                            .multilineTextAlignment(.center)
                            .padding(.top, 15)
                            .padding(.bottom, 10)
                            .foregroundColor(.blue)

                        SecureField("Password", text: $password)
                            .frame(width: UIScreen.main.bounds.size.width - 80, height: 41, alignment: .center)
                            .textFieldStyle(.plain)
                            .background(Color.init(red: 211.0/255.0, green: 211.0/255.0, blue: 211.0/255.0))
                            .textContentType(.password)
                            .cornerRadius(10)
                            .multilineTextAlignment(.center)
                            .foregroundColor(.blue)

                        Button(action: signIn) {
                            Text("Sign In")
                                .foregroundColor(.white)
                        }
                        .frame(width: UIScreen.main.bounds.size.width - 80, height: 50, alignment: .center)
                        .background(Color.blue)
                        .cornerRadius(20, antialiased: true)

                        Button(action: createAccount) {
                            Text("Don't have an account? Create one.")
                                .foregroundColor(.blue)
                        }
                        .frame(width: UIScreen.main.bounds.size.width - 80, height: 50, alignment: .center)

                        Button(action: forgotPassword) {
                            Text("Forgot password?")
                                .foregroundColor(.blue)
                        }
                        .frame(width: UIScreen.main.bounds.size.width - 80, height: 50, alignment: .center)
                    }
                }
                .frame(width: UIScreen.main.bounds.size.width - 40, height: 250, alignment: .center)
                .cornerRadius(20)
            }
        }
    }

    func signIn() {

    }

    func createAccount() {

    }

    func forgotPassword() {

    }
}

#if DEBUG
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

Answer 1

There is definetely something odd going on, however, you can workaround it by using zIndex() on your TextField and SecureField :

TextField("Email", text: $emailAddress, onEditingChanged: { edit in }, onCommit: { })
    .frame(width: UIScreen.main.bounds.size.width - 80, height: 41, alignment: .center)
    .textFieldStyle(.plain)
    .background(Color.init(red: 211.0/255.0, green: 211.0/255.0, blue: 211.0/255.0))
    .textContentType(.emailAddress)
    .cornerRadius(10)
    .multilineTextAlignment(.center)
    .padding(.top, 15)
    .padding(.bottom, 10)
    .foregroundColor(.blue)
    .zIndex(1)

SecureField("Password", text: $password)
    .frame(width: UIScreen.main.bounds.size.width - 80, height: 41, alignment: .center)
    .textFieldStyle(.plain)
    .background(Color.init(red: 211.0/255.0, green: 211.0/255.0, blue: 211.0/255.0))
    .textContentType(.password)
    .cornerRadius(10)
    .multilineTextAlignment(.center)
    .foregroundColor(.blue)
    .zIndex(1)