Clicking problems in SwiftUI Catalyst with Big Sur

Question

I just updated to Big Sur and now I'm experiencing serious troubles in my Catalyst app. I created a new project with similiar code to test it. The behaviour is a little bit different, but in both cases there is one point, where clicking stops working or at least it's not reliable anymore.

Take this example code:

struct ContentView: View {
        
    private var tabs = ["tab1", "tab2", "tab3"]
    @State private var selectedTab = 0
    
    var body: some View {
        VStack {
            
            self.fakeTabs()
            
            self.tabView()
            
        }
    }
    
    private func fakeTabs() -> some View {
        HStack(spacing: 0) {
            
            // ========================================================
            // Tabs
            // ========================================================
            ForEach(self.tabs, id: \.self) { tab in
                ZStack {
                    // background
                    Rectangle()
                        .fill(self.isSelected(tab: tab) ? Color.blue : Color.green)
                        .border(Color.black, width: 1)
                        .contentShape(Rectangle())
                    // icon
                    HStack(spacing: 15.0) {
                        Image(systemName: "folder")
                            .foregroundColor(.white)
                            .frame(width: 20, height: 20)
                        Text(tab)
                            .font(.caption)
                    }
                }
                .onTapGesture {
                    self.selectedTab = self.tabs.firstIndex(where: { $0 == tab }) ?? 0
                }
            }
        }
        .frame(height: 30)
    }
    
    private func tabView() -> some View {
        TabView(selection: self.$selectedTab) {
            
            ForEach(self.tabs.indices) { index in
                
                let tab = self.tabs[index]
                
                Text("Tab selected: \(tab)")
                    .tabItem { Text(tab) }
                    .tag(index)
                
            }
        }
    }
    
    private func isSelected(tab: String) -> Bool {
        if let index = self.tabs.firstIndex(where: { $0 == tab }) {
            if index == self.selectedTab {
                return true
            }
        }
        return false
    }
}

If you start clicking at the tab bar in the bottom, it works. If you then continue clicking on the tabs at the top, it works too. But after clicking on the fake tabs at the top, you cannot click on the TabBar at the bottom anymore.

Does somone else experience this problem? Is it a Big Sur bug?

EDIT

It works perfect in the Simulator on iPadOS.

Answer 1

This is definitely a major issue. Also reported here https://developer.apple.com/forums/thread/667004

I wish Apple would acknowledge it.

Answer 2

I am facing quite similar problems. I also have a HStack as a main view. In each row there are buttons and textfields. When adding / removing columns buttons stop working and focused textfields can't be changed with clicks anymore (right-clicks still working). Also observed non-working buttons in ZStacks. Still figuring out the problem-scenario to reproduce it reliably. Could be something with the HStack, as we both use them.