Swiftui Bug - Button (only top part is clickable)

I'm having an issue with SwiftUI where only the top part of the button is clickable, while the bottom part is not clickable at all.

Here is my code snippet. Does anyone know how I can fix this?

    var body: some View {
        VStack(spacing: 0) {
            ScrollView(.horizontal) {
                HStack {
                    Button(action: {}, label: {
                        ZStack {
                            Color.green
                            Text("Button")
                                .padding(8)
                                .contentShape(Rectangle())
                        }
                    })
                }
            }
            .background(Color.blue)
            .frame(height: 40)
            
            TabView {
                ZStack {
                    Color.yellow
                    Text("my view")
                }
            }
        }
    }
}
Answered by Claude31 in 802327022

I've no sure explanation, but it seems that the TabView is overlaying the button and intercepting the taps.

I made it work by adding a Spacer:

struct ContentView: View {
var body: some View {
        VStack(spacing: 0) {
            ScrollView(.horizontal) {
                HStack {
                    Button(action: {print("Button tapped")}, label: {
                        ZStack {
                            Color.green
                            Text("Button")
                                .padding(8)
                                .contentShape(Rectangle())
                        }
                    })
                }
            }
            .background(Color.blue)
            .frame(height: 40)
            
            Spacer()        // <<-- ADDED this
            
            TabView {
                ZStack {
                    Color.yellow
                    Text("my view")
                }
                .onTapGesture {
                    print("View tapped")
                }
            }
        }
        .background(Color.yellow)       // <<-- ADDED this so that Spacer is yellow as well and not white
    }
}

You could file a bug report if you don't get a better explanation here.

I've no sure explanation, but it seems that the TabView is overlaying the button and intercepting the taps.

I made it work by adding a Spacer:

struct ContentView: View {
var body: some View {
        VStack(spacing: 0) {
            ScrollView(.horizontal) {
                HStack {
                    Button(action: {print("Button tapped")}, label: {
                        ZStack {
                            Color.green
                            Text("Button")
                                .padding(8)
                                .contentShape(Rectangle())
                        }
                    })
                }
            }
            .background(Color.blue)
            .frame(height: 40)
            
            Spacer()        // <<-- ADDED this
            
            TabView {
                ZStack {
                    Color.yellow
                    Text("my view")
                }
                .onTapGesture {
                    print("View tapped")
                }
            }
        }
        .background(Color.yellow)       // <<-- ADDED this so that Spacer is yellow as well and not white
    }
}

You could file a bug report if you don't get a better explanation here.

Swiftui Bug - Button (only top part is clickable)
 
 
Q