Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Textfield tap is dismissing navigation link in SwiftUI

I'm facing a weird issue with textfields and navigation view/link using SwiftUI

All I do is navigate through views using navigation links and inside the destination view there are some textfields. When I tap on any of them the navigation automatically dismisses.

How can I fix navigation link from dismissing when textfield is tapped on and the keyboard shows up?

var emailLoginButton: some View {
    NavigationLink(destination: LoginView(viewModel: .init(mode: .login, isPushed: $viewModel.authViewPushed)), isActive: $viewModel.authViewPushed) {
        Button(action: { viewModel.authViewPushed = true }) {
            HStack {
                Image(systemName: "envelope")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 20, height: 20)
                    .foregroundColor(.white)
                
                Text("continue_with_email".localized())
                    .padding(.horizontal, 20)
            }
        }
        .padding()
        .frame(maxWidth: .infinity)
        .foregroundColor(.white)
        .background(Capsule().fill(Color.primaryPurple))
        .shadow(color: Color.black.opacity(0.15), radius: 5, x: 5, y: 5)
        .padding(.horizontal)
        .padding(.bottom, 20)
    }
    .isDetailLink(false)
}

// Destination's view textfield which "dismisses" navigationLink
var emailTextField: some View {
    HStack {
        Image(systemName: "envelope")
            .font(.title2)
            .foregroundColor(.primary)
            .frame(width: 35)

        TextField(viewModel.emailPlaceholderText.uppercased(), text: $viewModel.email)
            .autocapitalization(.none)
    }
    .padding()
    .background(Color.white.opacity(viewModel.email == stringEmpty ? 0 : 0.12))
    .cornerRadius(12)
    .padding(.horizontal)
}
like image 822
Rogério Toledo Avatar asked Nov 07 '22 02:11

Rogério Toledo


2 Answers

There seems to be an issue with iOS 14.5 and up where the tapping of any TextField inside a NavigationLink destination makes the view to pop out to the previous one.

There is a workaround thanks to @SeitenWerk and documented on the Apple Developer Forums

https://developer.apple.com/forums/thread/677333

The solution is simple. Just add an empty NavigationLink next to the one that fails. Interestingly, it logs "Unable to present. Please file a bug." on the debug console but makes things right with the usability of the app

NavigationLink(destination: LoginView()){
    Text("LOGIN")
}
NavigationLink(destination: EmptyView()) {
     EmptyView()
}

Remember to thank SeitenWerk on the Developer Forums.

like image 108
Julio Bailon Avatar answered Nov 15 '22 11:11

Julio Bailon


After some time of research I've found that NavigationLink closes because authViewPushed parameter in the viewModel becomes false. That happens because viewModel is being recreated because of firstView update. I've faced the same issue and here is the solution:

struct MyView: View {
    @StateObject var viewModel = MyViewModel()

    var body : some View {
        
    }
}

In this case MyView is being updated but MyViewModel remains the same.

like image 22
Izya Pitersky Avatar answered Nov 15 '22 13:11

Izya Pitersky