SwiftUI - dismissing keyboard on tapping anywhere in the view - issues with other interactive elements

You can create an extension on View like so

extension View {
  func endTextEditing() {
    UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder),
                                    to: nil, from: nil, for: nil)
  }
}

and use it for the Views you want to dismiss the keyboard.

.onTapGesture {

      self.endTextEditing()
} 

I have just seen this solution in a recent raywenderlich tutorial so I assume it's currently the best solution.

I'd like to take Mark T.s Answer even further and add the entire function to an extension for View:

extension View {
    func hideKeyboardWhenTappedAround() -> some View  {
        return self.onTapGesture {
            UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), 
                  to: nil, from: nil, for: nil)
        }
    }
}

Can then be called like:

var body: some View {
    MyView()
      // ...
      .hideKeyboardWhenTappedAround()
      // ...
}

@user3441734 is smart to enable the dismiss gesture only when needed. Rather than forcing every crevice of your forms to track state, you can:

1. Monitor UIWindow.keyboardWillShowNotification / willHide

2. Pass the current keyboard state via an EnvironmentKey set at the/a root view

Tested for iOS 14.5.

Attach dismiss gesture to the form

Form { }
    .dismissKeyboardOnTap()

Setup monitor in root view

// Root view
    .environment(\.keyboardIsShown, keyboardIsShown)
    .onDisappear { dismantleKeyboarMonitors() }
    .onAppear { setupKeyboardMonitors() }

// Monitors

    @State private var keyboardIsShown = false
    @State private var keyboardHideMonitor: AnyCancellable? = nil
    @State private var keyboardShownMonitor: AnyCancellable? = nil
    
    func setupKeyboardMonitors() {
        keyboardShownMonitor = NotificationCenter.default
            .publisher(for: UIWindow.keyboardWillShowNotification)
            .sink { _ in if !keyboardIsShown { keyboardIsShown = true } }
        
        keyboardHideMonitor = NotificationCenter.default
            .publisher(for: UIWindow.keyboardWillHideNotification)
            .sink { _ in if keyboardIsShown { keyboardIsShown = false } }
    }
    
    func dismantleKeyboarMonitors() {
        keyboardHideMonitor?.cancel()
        keyboardShownMonitor?.cancel()
    }

SwiftUI Gesture + Sugar

struct HideKeyboardGestureModifier: ViewModifier {
    @Environment(\.keyboardIsShown) var keyboardIsShown
    
    func body(content: Content) -> some View {
        content
            .gesture(TapGesture().onEnded {
                UIApplication.shared.resignCurrentResponder()
            }, including: keyboardIsShown ? .all : .none)
    }
}

extension UIApplication {
    func resignCurrentResponder() {
        sendAction(#selector(UIResponder.resignFirstResponder),
                   to: nil, from: nil, for: nil)
    }
}

extension View {

    /// Assigns a tap gesture that dismisses the first responder only when the keyboard is visible to the KeyboardIsShown EnvironmentKey
    func dismissKeyboardOnTap() -> some View {
        modifier(HideKeyboardGestureModifier())
    }
    
    /// Shortcut to close in a function call
    func resignCurrentResponder() {
        UIApplication.shared.resignCurrentResponder()
    }
}

EnvironmentKey

extension EnvironmentValues {
    var keyboardIsShown: Bool {
        get { return self[KeyboardIsShownEVK] }
        set { self[KeyboardIsShownEVK] = newValue }
    }
}

private struct KeyboardIsShownEVK: EnvironmentKey {
    static let defaultValue: Bool = false
}

You can set .allowsHitTesting(false) to your Picker to ignore the tap on your VStack

I had a similar problem and I solved it on iOS 15+ without using UIKit in a way that in your example would look more or less like below. It also worked for me in another case when I added onTapGesture on a List with NavigationLinks displayed below a TextField.

struct SampleView: View {
    @State var selected = 0
    @State var textFieldValue = ""
    @FocusState private var keyboardShown: Bool

    var body: some View {
        VStack(spacing: 16) {
            TextField("Enter your name", text: $textFieldValue)
                .padding(EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16))
                .background(Color(UIColor.secondarySystemFill))
                .cornerRadius(4)
                .autocorrectionDisabled()
                .focused($keyboardShown) // save info if keyboard opened

            VStack {
                Picker(selection: $selected, label: Text(""), content: {
                    Text("Word").tag(0)
                    Text("Phrase").tag(1)
                    Text("Sentence").tag(2)
                }).pickerStyle(SegmentedPickerStyle())
                
                Button(action: {
                    self.textFieldValue = "button tapped"
                }, label: {
                    Text("Tap to change text")
                })
                
                Spacer() // let's also dismiss when we get a tap on empty space here
            }
            .contentShape(Rectangle()) // without this tap to dismiss on Spacer does not work
            .onTapGesture(count: keyboardShown ? 1 : .max, perform: { // if keyboard shown use single tap to close it, otherwise set .max to not interfere with other stuff
                keyboardShown = false
            })
        }.padding()
    }
}

I was still struggling with this issue, my workaround is as follows:

extension View {
    func keyboardDismiss() -> some View {
        modifier(KeyboardDismiss())
    }
}

private struct KeyboardDismiss: ViewModifier {
    func body(content: Content) -> some View {
        content.onTapGesture {
            UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
        }
    }
}

I am using the standard solution that is proposed everywhere. Then I use it in my form sections:

Section {}.keyboardDismiss()

then if there is a Picker in the section I use following modifiers to enable the interaction with the picker:

Picker()
   .contentShape(Rectangle())
   .allowsHitTesting(false)

Apply this to root view

.onTapGesture {
    UIApplication.shared.endEditing()
}