Hide keyboard when scrolling in SwiftUI with scrollDismissesKeyboard

In iOS, we have dedicated built-in ways to dismiss the keyboard in scrollable content.

Since iOS 7, UIKit got a way to control keyboard dismissal behavior by setting UIScrollView's instance method, keyboardDismissMode.

This year in iOS 16, SwiftUI got the way to set this behavior with scrollDismissesKeyboard(_:) modifier.

First, for those unfamiliar with the iOS system, let's learn three ways to dismiss keyboard. After that, we learn how easy it is to implement that in SwiftUI.

If you know them already, you can jump right to the implementation.

Keyboard dismissal behavior

There are three ways to dismiss the keyboard in scrollable content.

1. Never: Scrolling won't dismiss the keyboard in this setting.
2. Immediately: Dismiss the keyboard as soon as scrolling starts.
3. Interactively: The keyboard follows the dragging touch offscreen and can be pulled upward again to cancel the dismiss.

It is easier to understand all of these behaviors with examples.

Never

ScrollDismissesKeyboardMode.never is the easiest behavior to understand.

The keyboard won't dismiss once presented.

Immediately

ScrollDismissesKeyboardMode.immediately will dismiss the keyboard as soon as scrolling starts.

This is the behavior you usually see in most forms of iOS.

Here is a form to create a new event in the Calendar app.

This is the default behavior of List and Form in SwiftUI.

Interactively

ScrollDismissesKeyboardMode.interactively will begin the dismissal process when you drag the keyboard down, and you can drag up to cancel the dismiss.

You would see this keyboard behavior in a view that focuses on writing, e.g., Note app.

Here is an example of interactively dismissal behavior in the Note app.

You can easily support sarunw.com by checking out this sponsor.

Note Taking:Quickly take note using Voice, Camera, or Typing

Try it for Free

scrollDismissesKeyboard

Now that you know three ways to dismiss the keyboard, let's learn how to set it in SwiftUI.

To control keyboard dismissal behavior, we set it via scrollDismissesKeyboard modifier.

You can apply this to scrollable content like ScrollView, List, or Form.

In this example, scrolling won't cause the keyboard to dismiss.

struct KeyboardDismissExample: View {
    @State private var text = ""
    
    var body: some View {
        List {
            ForEach(0..<100) { i in
                TextField(("Item \(i)"), text: .constant(""))
            }
        }
        .scrollDismissesKeyboard(.never)
    }
}