SwiftUI TextField has a very small tappable area and there is no simple way to make that area bigger. This is a solution using Introspect (https://github.com/siteline/SwiftUI-Introspect/) Stack Overflow question: https://stackoverflow.com/questions/56795712/swiftui-textfield-touchable-area/62089790#62089790

TextFieldFocusableArea.swift

extension View {
    public func textFieldFocusableArea() -> some View {
        TextFieldButton { self.contentShape(Rectangle()) }
    }
}

fileprivate struct TextFieldButton<Label: View>: View {
    init(label: @escaping () -> Label) {
        self.label = label
    }
    
    var label: () -> Label
    
    private var textField = Weak<UITextField>(nil)
    
    var body: some View {
        Button(action: {
            self.textField.value?.becomeFirstResponder()
        }, label: {
            label().introspectTextField {
                self.textField.value = $0
            }
        }).buttonStyle(PlainButtonStyle())
    }
}

/// Holds a weak reference to a value
public class Weak<T: AnyObject> {
    public weak var value: T?
    public init(_ value: T?) {
        self.value = value
    }
}

zExample.swift

struct ExampleView: View {
    @State var text: String = ""
    
    var body: some View {
        TextField("User ID", text: $text)
        .padding(20)
        .textFieldFocusableArea() // You can now tap in the 20 padding around the TextField and it will focus
    }
}       

Your solution is nicer than the original gist @tyirvine

But since the Button adds its own styling and animations I now advise using ResponderChain for this.

import ResponderChain

extension View {
    public func textFieldFocusableArea() -> some View {
        self.modifier(TextFieldFocusableAreaModifier())
    }
}

fileprivate struct TextFieldFocusableAreaModifier: ViewModifier {
    @EnvironmentObject private var chain: ResponderChain
    @State private var id = UUID()
    
    func body(content: Content) -> some View {
        content
            .contentShape(Rectangle())
            .responderTag(id)
            .onTapGesture {
                chain.firstResponder = id
            }
    }
}

You'll have to set the ResponderChain as environment object in the SceneDelegate

Don't forget to change the cursor if you use this on MacOS.

I use this: https://gist.github.com/Amzd/cb8ba40625aeb6a015101d357acaad88

Not sure how to do cursor stuff on iPad.

Your solution is nicer than the original gist @tyirvine

But since the Button adds its own styling and animations I now advise using ResponderChain for this.

import ResponderChain

extension View {
    public func textFieldFocusableArea() -> some View {
        self.modifier(TextFieldFocusableAreaModifier())
    }
}

fileprivate struct TextFieldFocusableAreaModifier: ViewModifier {
    @EnvironmentObject private var chain: ResponderChain
    @State private var id = UUID()
    
    func body(content: Content) -> some View {
        content
            .contentShape(Rectangle())
            .responderTag(id)
            .onTapGesture {
                chain.firstResponder = id
            }
    }
}

You'll have to set the ResponderChain as environment object in the SceneDelegate

Have you checked CPU usage and Memory using this solution. I am having CPU working at 100% and Memory constantly increasing.

Are you using ResponderChain with the SwiftUI only call or are you initializing your own ResponderChain object? The SwiftUI only version is not very optimized and I should really update it. I don’t have access to a Mac right now to test it.

Are you using ResponderChain with the SwiftUI only call or are you initializing your own ResponderChain object? The SwiftUI only version is not very optimized and I should really update it. I don’t have access to a Mac right now to test it.

Just copy/pasted the above solution. I am testing it on iOS.

Okay but you have to attach a ResponderChain which is not in the above solution. Otherwise the environmentobject is empty and it crashes.