[Fixed] SwiftUI DatePicker issue iOS 17.1 – Swiftui

by
Alexei Petrov
datepicker swiftui-ontapgesture

Quick Fix: Avoid using onTapGesture on the entire ZStack containing your content and calling view.endEditing(). This can cause issues with the DatePicker in iOS 17.1.

The Problem:

DatePicker in SwiftUI app is not responding to taps in iOS 17.1. The issue was previously absent in iOS 17.0.1. When a user taps on the DatePicker, it doesn’t open as expected. However, it opens when a long press is performed on the DatePicker for approximately 2-3 seconds. The goal is to restore the DatePicker’s functionality so that it opens upon a single tap.

The Solutions:

Solution 1: Avoid calling `view.endEditing()` on the entire ZStack

If you are using onTapGesture to handle user interaction on the entire ZStack containing your content and calling `view.endEditing()`, this might be causing the issue. In iOS 17.1, calling `view.endEditing()` on the entire ZStack seems to conflict with the behavior of `DatePicker`. As a result, the `DatePicker` does not open when tapped.

To resolve this issue, you should avoid calling `view.endEditing()` on the entire ZStack. Instead, you can use a more targeted approach to dismiss the keyboard. For example, you could use .focused() to target specific views that require keyboard input and call `view.endEditing()` on those views only when necessary.

Here’s an example of how you could use .focused() to dismiss the keyboard when a specific view is tapped:

struct ContentView: View {
    @State private var date = Date()
    @FocusState private var isFocused

    var body: some View {
        VStack {
            DatePicker("Date", selection: $date, displayedComponents: [.date])
                .focused($isFocused)

            Button("Done") {
                isFocused = false
            }
        }
    }
}

In this example, the DatePicker is wrapped in a .focused() modifier. When the user taps on the `DatePicker`, the isFocused state variable becomes `true`, which causes the DatePicker to receive focus. The user can then select a date using the DatePicker.

When the user taps the “Done” button, the isFocused state variable is set to `false`, which causes the DatePicker to lose focus. This dismisses the keyboard and allows the user to continue interacting with the rest of the view.

By using this approach, you can avoid calling view.endEditing() on the entire ZStack, which should resolve the issue with the `DatePicker` not opening when tapped in iOS 17.1.

Solution 2: Override Tap Gesture to Fix iOS 17.1 Bug

In iOS 17.1, a `DatePicker` with `displayedComponents: .date` can encounter a bug where it doesn’t open when tapped. This is likely due to a higher-level `TapGesture` handler in the view hierarchy interfering with the `DatePicker`’s behavior.

To resolve this issue, you can wrap the `DatePicker` with its own `TapGesture` handler with a required `Count`. By doing so, the buggy behavior will be prevented as long as the `Count` is not fulfilled.

Here’s an example of how to implement this solution in your code:

struct ContentView: View {
@State private var date = Date()

var body: some View {
    VStack {
        DatePicker(
            "Foo",
            selection: $date,
            displayedComponents: .date
        )
        .onTapGesture(count: 99, perform: {
            // overrides tap gesture to fix ios 17.1 bug
        })
    }
    .onTapGesture {
    }
  }
}

In this example, the `DatePicker` is wrapped with a `TapGesture` handler that requires 99 taps before it triggers its action. This effectively prevents the buggy behavior from occurring.

Note that this solution is a workaround for a bug in iOS 17.1. It may not be necessary in future versions of iOS.

Q&A

DatePicker not opening on tap after iOS 17.1 update.

It might be caused by onTapGesture higher in the view hierarchy conflicting with DatePicker.

How to fix DatePicker not opening on tap in iOS 17.1?

Try wrapping the DatePicker with a TapGesture with a very high count that won’t be triggered under normal use.

Video Explanation:

The following video, titled "Coding Workshop 10 - Location Finder App Part 3 - Displaying a ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

Play video

How to build an iOS app that connects to an API - SwiftUI Full Tutorial ... SwiftData Storing Images and Bug Fixes. Stewart Lynch•1.4K views · 9 ...