.onTapGesture doesn't work on Stepper, only on its text

Question

The .onTapGesture below only gets called when I tap on the text "Min. amount: $0.01", but when I tap the + or - it doesn't. How can I get it to work on the + or - as well?

I tried setting a frame below the Stepper with:

.frame(maxWidth: .infinity, maxHeight: .infinity)

or setting the foreground color but made no difference. Any idea?

Its code:

@ViewBuilder var minCoinAmount: some View {
    // Min coin amount
    Stepper(value: $smallBalanceLimitDefinedByUser,
            in: range,
            step: step) {
        // Separated in two texts so it can be localized properly
        HStack {
            Text("Min. amount:")
            Text(utils.formatDoubleTo2DigitsString(amount: smallBalanceLimitDefinedByUser))
        }
    }
}

and I'm calling it with:

minCoinAmount
    .disabled(true)
    .onTapGesture {
        // Presents the Premium page
        storeViewModel.premiumIsPresented.toggle()
    }

Answer 1

Add hit test area with contentShape modifier, like

.contentShape(Rectangle())    // << here !!
.onTapGesture {

Tested with Xcode 13.4 / iOS 15.5