SwiftUI Dismiss keyboard on List NavigationLink item tap

Question

I have a list of items and a text field for search keywords. When I do search on the list and tap on items, navigationlink works faster than keyboard dismiss, and this causes a disabled area in the next scroll view.

// search TextField
  HStack {
                                    Spacer(minLength: 10)
                                    Image(systemName: "magnifyingglass")
                                        .foregroundColor(.gray)
                                    TextField("Search",
                                              text: self.$textbox){
                                        UIApplication.shared.endEditing()
                                    }
                                        .onChange(of: textbox) {
                                                        print($0)
                                          
                                            dictionaryListVM.getResult(language: self.currentLanguage, text: self.textbox)
                                                    self.theId += 1
                                                    }
                                        .accessibility(identifier: "loginUserName")
                                        .background(Color.white)
                                        
                                        .frame(height: 10, alignment: .leading)
                                        .padding()
                                    
                                    
                                }.overlay(
                                    RoundedRectangle(cornerRadius: 4)
                                        .stroke(Color.gray, lineWidth: 2)
                                    
                                    
                                )



// Subview for displaying items:
GeometryReader { reader in
            ScrollView {
                VStack {
                    if model.dataLoaded {
                List {
                
                    ForEach(self.model.englishDictionaries, id: \.id) { item in
                        
                        ZStack {
                            VStack(alignment: .leading, spacing: 4) {
                                Text("\(item.value)").font(.title2)
                                Text("\(item.pairWord)").foregroundColor(.gray).font(.caption)
                            }
                            NavigationLink(destination: WordDetailView(englishWordId: item.id, englishWord: item.value, lang: "en")) {
                              
                            }
                            .isDetailLink(false)
                            .buttonStyle(PlainButtonStyle()).frame(width:0).opacity(0)
                        }
                        
                    }
                }.frame(height:  reader.size.height)
                .animation(.linear)
                    }else{
                        Text("Words sync inprogress, please comeback later.")
                    }
                }
            }.padding(.leading, 10)
            
        }

So, I want to make sure that my keyboard is dismayed before navigation to the next view.

check out demo for the issue in action

Answer 1

If you are using iOS 15

I believe you can make use of the @FocusState Property wrapper to dismiss the keyboard.

1. First you will have to define a variable to hold the focus value.

@FocusState private var isFocused: Bool

2. Adding the .focused(_:) View Modifier to the TextField :

TextField("Hello There", text: $someText)
    .focused($isFocused)

3. Toggling $isFocused on button press or navigation link press. You can set it as shown below:

isFocused = false