Swiftui button press does not always work

June 13, 2023

When I press the button "Get New Connection Pin" it does not always print to console. Let’s like I have to press the button a few times before it will print to console or for me to see the button visibly being pressed.

swiftui:

import SwiftUI

struct JokeView: View {
    @State private var jokeString = "No Joke Available"
    @State private var fetching = false
    
    var body: some View {
        VStack(spacing: 20) {
            VStack(alignment: .leading, spacing: 10) {
                Text("Connection Pin:")
                    .font(.headline)
                    .foregroundColor(.gray)
                
                Button(action: {
                    print("Copy Connection Pin to clipboard")
                }) {
                    Text("3kus-32dak")
                        .fontWeight(.semibold)
                        .frame(maxWidth: .infinity, alignment: .leading)
                }
                .cornerRadius(8)
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding()
            .background(Color.gray.opacity(0.2))
            .cornerRadius(8)
            
            Button(action: {
                print("Requesting a new connection pin")
            }) {
                Text("Get New Connection Pin")
            }
            .frame(maxWidth: .infinity, minHeight: 40)
            .buttonStyle(PlainButtonStyle())
            .background(Color.blue)
            .cornerRadius(4)
            .contentShape(Rectangle()) // Make the entire button tappable
            
        }
        .padding()
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
    }
}

struct JokeView_Previews: PreviewProvider {
    static var previews: some View {
        JokeView()
            .frame(width: 225, height: 225)
            .background(Color.white.opacity(0.1))
    }
}

>Solution :

Running your code, seems that .contentShape(Rectangle()) // Make the entire button tappable is not actually accomplishing what you want it to accomplish and the text is still the only tappable portion of the button.

Fix is to apply your sizing transformations on the Text inside the Button Label instead of to the button.

For example (you could do it in a few ways):

Button(action: {
    print("Requesting a new connection pin")
}) {
    Text("Get New Connection Pin")
        .frame(maxWidth: .infinity, minHeight: 40)
        .background(Color.blue)
        .cornerRadius(4)
        .contentShape(Rectangle()) // Make the entire button tappable
}
.buttonStyle(PlainButtonStyle())

More in here: SwiftUI Button tap only on text portion

This blog post has a pretty good explanation too.

However, this would be much simpler to accomplish the same thing:

Button("Get New Connection Pin", action: {
    print("Requesting a new connection pin")
})
.tint(.blue)
.controlSize(.large)
.buttonStyle(.borderedProminent)