Increase tappable area of TextField

Question

I currently have the following code that represents a TextField with a background and an icon.

struct TextFieldAreaView: View {
    
    @State var query = ""
    
    var body: some View {
        
        HStack {
            
            Image(systemName: "magnifyingglass")
                .padding(.leading, 10)
            
            TextField("Placeholder", text: $query)
                .padding(5)
        }
        .background(Color.black.opacity(0.3))
        .cornerRadius(10)
        .padding()
        
    }
}

Of course, because the background is actually a HStack and the icon an image outside the TextField's frame area, when the user taps on either of those, the keyboard won't show up.

In order for the keyboard to show you must precisely tap on the TextField. This of course is not very intuitive.

Is there any way to make it so that when tapping on the icon or the background HStack the keyboard would show up?

You can try one of the solutions provided here: [link](https://stackoverflow.com/questions/56795712/swiftui-textfield-touchable-area) — federicoramos77, Mar 15 '21 at 14:50
@federicoramos77 Isn't there any way to do it without using a third party package? — Flerex, Mar 15 '21 at 16:52

score -1 · Answer 1 · answered Mar 16 '21 at 17:54

You can try removing the padding or provide a negative for example:

 .padding(.trailing, -100)

Doing this will increase the tappable area. Because by default when you use a padding() it shrinks your text field in all 4 directions top, button, left and right.

Here is an example taken from my project:

  HStack{
        Image(systemName: taskViewModel.task.completed ? "checkmark.circle.fill" : "circle")
            .resizable()
            .frame(width: 20, height:20)
            .onTapGesture {
                self.taskViewModel.task.completed.toggle()
            }
        TextField("Enter the task title", text: $taskViewModel.task.title, onCommit: {
            self.onCommit(self.taskViewModel.task)
            
                
        })
        .padding()
        .padding(.trailing, -100)

Unfortunately this does not seem work. It also moves the text and placeholder position. — Flerex, Mar 17 '21 at 10:01

Increase tappable area of TextField

1 Answers1