SwiftUI List rows with multiple buttons trigger all buttons

Question

Created Jun ’20

Replies 3

Boosts 0

Views 2.4k

Participants 3

I have a SwiftUI List with an HStack containing two Buttons.

If I tap either button, or elsewhere in the cell, the entire cell highlights and actions for both Buttons are fired off.

I can't find where this is documented, but have found that adding

Code Block .buttonStyle(BorderlessButtonStyle())

to the List prevents this behavior - tapping individual buttons fire their individual actions as expected.

Is this an expected behavior?

Below is my example without the workaround applied:

Code Block struct ContentView: View {
    var body: some View {
        List {
            HStack {
                Button(action: {
                    print("button 1 tapped")
                }) {
                    Text("One")
                }
                Button(action: {
                    print("button 2 tapped")
                }) {
                    Text("Two")
                }
            }
        }
    }
}

Thanks!

Answered by HeGer in 616467022

Sorry, I didn't read properly. I couldn't find an official explanation either.

Boost

Answer 1

HeGer OP

Jun ’20

You have to add the BorderlessButtonStyle to each button:

Code Block swiftList {
		HStack {
				Button(action: {
						print("button 1 tapped")
				}) {
						Text("One")
				}.buttonStyle(BorderlessButtonStyle())
				Button(action: {
						print("button 2 tapped")
				}) {
						Text("Two")
				}.buttonStyle(BorderlessButtonStyle())
		}
}

1

Answer 2

HeGer OP

Jun ’20

Accepted Answer

Sorry, I didn't read properly. I couldn't find an official explanation either.

1

Answer 3

Luca_65 OP

Mar ’22

I have had the same issue and thanks to your post I found that any not bordered, and not automatic or default, buttonStyle works correctly (that are: plain and borderless). Moreover the issue is absent on macOS.

0