[SwiftUI] How can you use onTapGesture for the entire row in a ForEach loop?

While working on a new feature for my QuickDrop app, I encounter an intersting challenge regarding to the HStack.

The clickable area is not the entire row, but only where the title text is. The empty space is not clickable. This is a very bad user experience:

Interesting issue when working with onTapGesture and HStack.

Only title text is clickable, but not the entire row. pic.twitter.com/lPCSEVS68S

— An Tran (@antranapp) May 13, 2024

This is the code I have to render the above UI.

ForEach(shellScripts, id: \.self) { shellScript in
    HStack {
        Text(shellScript.shellScript.name)
        Spacer()
        if shellScript == shellScriptRow {
            Image(systemName: "checkmark").foregroundStyle(.green)
        }
    }
    .onTapGesture {
      // handle the tap gesture
    }
}

Luckily, there is very simple fix that people have suggested to me via X, simply adding .contentShape(.rect) modifier to the HStack

The improved code should be

ForEach(shellScripts, id: \.self) { shellScript in
    HStack {
        Text(shellScript.shellScript.name)
        Spacer()
        if shellScript == shellScriptRow {
            Image(systemName: "checkmark").foregroundStyle(.green)
        }
    }
    .contentShape(.rect)
    .onTapGesture {
      // handle the tap gesture
    }
}

The result behaviour is what I expected:

I could fix this issue now and it will come in the next version of @UseQuickDrop

Thank everyone who suggested this simple fix. This is the really power of #buildinpublic. I can ask for help in public as well 💪👌 pic.twitter.com/hE1HBWNTO1

— An Tran (@antranapp) May 13, 2024