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.
