FB15804345: ToolbarItems lack hover states when contained within TabView in Designed for iPad apps

[samhenrigold]

• Date: 2024-11-14
• Resolution: Open
• Area: SwiftUI
• OS: visionOS 2.0.1 (22N342)
• Type: Incorrect/Unexpected Behavior
• Where does the issue occur? On device

Description

When running a “Designed for iPad” SwiftUI app on visionOS, the toolbar’s standard items lack default hover states when that toolbar is embedded inside a TabView. Removing the TabView fixes the issue.

See the sample code and attached video.

Expected Results:
Standard toolbar items have a hover state when gazed at.

Actual Results:
No hover state is displayed. hoverEffect has no effect either.

Files

TabView.Breaks.visionOS.Hover.Effects.in.Toolbar.mp4

HoverVision.zip (expand for files)

//
//  HoverVisionApp.swift
//  HoverVision
//
//  Created by Matthew Bischoff on 11/13/24.
//

import SwiftUI

@main
struct HoverVisionApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

//
//  ContentView.swift
//  HoverVision
//
//  Created by Matthew Bischoff on 11/13/24.
//

import SwiftUI

struct ContentView: View {
    @State private var selectedTab: HomeTab = .overview
    
    var body: some View {
//        TabView(selection: $selectedTab) {
            OverviewView()
//                .tabItem {
//                    Label(HomeTab.overview.title, systemImage: HomeTab.overview.systemName)
//                }
//                .tag(HomeTab.overview)
//            
//            Text("Transactions")
//                .tabItem {
//                    Label(HomeTab.transactions.title, systemImage: HomeTab.transactions.systemName)
//                }
//                .tag(HomeTab.transactions)
//        }
    }
}

enum HomeTab {
    case overview
    case transactions
    
    var title: String {
        switch self {
        case .overview: return "Overview"
        case .transactions: return "Transactions"
        }
    }
    
    var systemName: String {
        switch self {
        case .overview: return "chart.bar"
        case .transactions: return "list.bullet"
        }
    }
}


#Preview {
    ContentView()
}

//
//  OverviewView.swift
//  HoverVision
//
//  Created by Sam Gold on 2024-11-13.
//

import SwiftUI

struct OverviewView: View {
    var body: some View {
        NavigationStack {
            List {
                ForEach(UIFont.familyNames, id: \.self) { font in
                    Text(font)
                }
            }
            .navigationTitle("Overview")
            .toolbar {
                ToolbarItem(placement: .topBarLeading) {
                    EditButton()
                }
                
                ToolbarItem(placement: .topBarTrailing) {
                    Button {
                        // Action
                    } label: {
                        Image(systemName: "gear")
                    }
                }
            }
        }
    }
}

#Preview {
    OverviewView()
}