When adding buttons to a sheet, on tvOS the text is blurred in the buttons, making it illegible. Feedback: FB21228496
(used GPT to extract an example from my project for a test project to attach here)
// ButtonBlurTestView.swift
// Icarus
//
// Test view to reproduce blurred button issue on tvOS
//
import SwiftUI
struct ButtonBlurTestView: View {
@State private var showSheet = false
@State private var selectedTags: [Int] = []
@State private var newTagName: String = ""
// Hardcoded test data
private let testTags = [
TestTag(id: 1, label: "Action"),
TestTag(id: 2, label: "Comedy"),
TestTag(id: 3, label: "Drama"),
TestTag(id: 4, label: "Sci-Fi"),
TestTag(id: 5, label: "Thriller")
]
var body: some View {
NavigationStack {
VStack {
Text("Button Blur Test")
.font(.title)
.padding()
Button("Show Test Sheet") {
showSheet = true
}
.buttonStyle(.borderedProminent)
.padding()
Text("Tap the button above to open a sheet with buttons inside a Form.")
.font(.caption)
.foregroundColor(.secondary)
.multilineTextAlignment(.center)
.padding()
}
.navigationTitle("Blur Test")
.sheet(isPresented: $showSheet) {
TestSheetView(
selectedTags: $selectedTags,
newTagName: $newTagName,
testTags: testTags
)
}
}
}
}
struct TestSheetView: View {
@Environment(\.dismiss) private var dismiss
@Binding var selectedTags: [Int]
@Binding var newTagName: String
let testTags: [TestTag]
var body: some View {
NavigationStack {
VStack {
// Header
VStack {
Text("Testing")
.font(.title2)
.bold()
Text("Test TV Show")
.font(.subheadline)
.foregroundColor(.secondary)
}
.padding()
// Form with buttons
Form {
Section(header: Text("Summary")) {
Text("This is a test")
.font(.subheadline)
.foregroundColor(.secondary)
}
Section(header: Text("Tags")) {
tagsSelectionView
}
}
}
.navigationTitle("Add")
#if !os(tvOS)
.navigationBarTitleDisplayMode(.inline)
#endif
.toolbar {
ToolbarItem(placement: .cancellationAction) {
Button("Cancel") { dismiss() }
}
ToolbarItem(placement: .confirmationAction) {
Button("Add") { dismiss() }
}
}
}
}
private var tagsSelectionView: some View {
VStack(alignment: .leading) {
// Tag pills in a grid
let columns = [GridItem(.adaptive(minimum: 80), spacing: 8)]
LazyVGrid(columns: columns, alignment: .leading, spacing: 8) {
ForEach(testTags, id: \.id) { tag in
TagPill(
tag: tag,
selected: selectedTags.contains(tag.id)
) {
if selectedTags.contains(tag.id) {
selectedTags.removeAll { $0 == tag.id }
} else {
selectedTags.append(tag.id)
}
}
}
}
Divider()
// Add new tag button
HStack {
TextField("New tag name", text: $newTagName)
#if os(tvOS)
.textFieldStyle(PlainTextFieldStyle())
#else
.textFieldStyle(RoundedBorderTextFieldStyle())
#endif
Button("Add") {
// Test action
newTagName = ""
}
.disabled(newTagName.trimmingCharacters(in: .whitespaces).isEmpty)
}
}
}
}
// Tag Pill - matches the structure from original project
private struct TagPill: View {
let tag: TestTag
let selected: Bool
let action: () -> Void
var body: some View {
Button(action: action) {
Text(tag.label)
.font(.callout)
.lineLimit(1)
.padding(.horizontal, 12)
.padding(.vertical, 8)
.background(
Capsule()
.fill(selected ? Color.accentColor : Color.secondary.opacity(0.15))
)
.overlay(
Capsule()
.stroke(selected ? Color.accentColor : Color.secondary.opacity(0.35), lineWidth: 1)
)
.foregroundStyle(selected ? Color.white : Color.primary)
.contentShape(Capsule())
}
.buttonStyle(.plain)
#if os(tvOS)
.focusable(true)
#endif
}
}
struct TestTag {
let id: Int
let label: String
}
#Preview {
ButtonBlurTestView()
}
