fix(apple/tvOS): system fullscreen keyboard for all text entry — no inline fields
ci / rust (push) Has been cancelled

SwiftUI's inline TextField on tvOS is structurally wrong for television: it grows when
activated, shows a full-width editing surface behind the pill, and floats labels
off-center — none of it stylable into the Settings-app look. Per Apple's tvOS text
input guidance, real tvOS apps never edit inline: a field is a value ROW, and pressing
it raises the SYSTEM fullscreen keyboard.

- TVTextEntry (UIViewControllerRepresentable): a UITextField that becomesFirstResponder
  on appear, presenting the standard tvOS fullscreen keyboard with the field's prompt;
  done/dismiss commits the text. TVFieldRow is the Settings-style label+value lozenge.
- Add Host and PIN pairing on tvOS now use rows + keyboard covers exclusively (the
  port row also fixes the off-center value text for good — it's a Text, not a field);
  the port input validates 1...65535.
- No SwiftUI TextField remains in any tvOS code path.

Verified by screenshot: the dialog rows render exactly like the Settings app, and the
address row raises the system linear keyboard with prompt + done.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-06-11 13:56:39 +02:00
parent f292b3fe3a
commit 06a2d5e0ca
3 changed files with 162 additions and 15 deletions
@@ -8,22 +8,32 @@ struct AddHostSheet: View {
@State private var name = "" @State private var name = ""
@State private var address = "" @State private var address = ""
@State private var port = 9777 @State private var port = 9777
#if os(tvOS)
private enum EditField: String, Identifiable {
case name, address, port
var id: String { rawValue }
}
@State private var editing: EditField?
#endif
let onAdd: (StoredHost) -> Void let onAdd: (StoredHost) -> Void
var body: some View { var body: some View {
#if os(tvOS) #if os(tvOS)
// No Form here: tvOS list rows add a full-width focus fill + row platter // No inline text editing on tvOS Settings-style value rows; pressing one
// behind the field's own pill. Standalone fields have exactly one pill. // raises the SYSTEM fullscreen keyboard (TVTextEntry).
VStack(spacing: 28) { VStack(spacing: 24) {
Text("Add Host") Text("Add Host")
.font(.title3.weight(.semibold)) .font(.title3.weight(.semibold))
TextField("Name", text: $name, prompt: Text("Optional — e.g. Living Room")) TVFieldRow(
.labelsHidden() label: "Name", value: name, placeholder: "Optional"
TextField("Address", text: $address, prompt: Text("IP or hostname")) ) { editing = .name }
.labelsHidden() TVFieldRow(
TextField("Port", value: $port, format: .number.grouping(.never)) label: "Address", value: address, placeholder: "IP or hostname"
.labelsHidden() ) { editing = .address }
TVFieldRow(
label: "Port", value: String(port), placeholder: ""
) { editing = .port }
HStack(spacing: 32) { HStack(spacing: 32) {
Button("Cancel", role: .cancel) { dismiss() } Button("Cancel", role: .cancel) { dismiss() }
Button("Add Host") { add() } Button("Add Host") { add() }
@@ -33,6 +43,29 @@ struct AddHostSheet: View {
} }
.frame(maxWidth: 1000) .frame(maxWidth: 1000)
.padding(60) .padding(60)
.fullScreenCover(item: $editing) { field in
switch field {
case .name:
TVTextEntry(title: "Name (optional, e.g. Living Room)", text: name) {
name = $0
editing = nil
}
case .address:
TVTextEntry(title: "IP or hostname", text: address) {
address = $0.trimmingCharacters(in: .whitespaces)
editing = nil
}
case .port:
TVTextEntry(
title: "Port", text: String(port), keyboardType: .numberPad
) {
if let value = Int($0), (1...65535).contains(value) {
port = value
}
editing = nil
}
}
}
#else #else
VStack(spacing: 0) { VStack(spacing: 0) {
Form { Form {
@@ -33,6 +33,13 @@ struct PairSheet: View {
@State private var busy = false @State private var busy = false
@State private var errorText: String? @State private var errorText: String?
@State private var token = CeremonyToken() @State private var token = CeremonyToken()
#if os(tvOS)
private enum EditField: String, Identifiable {
case pin, clientName
var id: String { rawValue }
}
@State private var editing: EditField?
#endif
var body: some View { var body: some View {
#if os(tvOS) #if os(tvOS)
@@ -47,12 +54,12 @@ struct PairSheet: View {
.font(.callout) .font(.callout)
.foregroundStyle(.secondary) .foregroundStyle(.secondary)
.multilineTextAlignment(.center) .multilineTextAlignment(.center)
TextField("PIN", text: $pin, prompt: Text("Shown in the host's log")) TVFieldRow(
.labelsHidden() label: "PIN", value: pin, placeholder: "Shown in the host's log"
TextField( ) { editing = .pin }
"Client name", text: $clientName, TVFieldRow(
prompt: Text("How the host lists this device")) label: "Device name", value: clientName, placeholder: "Apple TV"
.labelsHidden() ) { editing = .clientName }
if let errorText { if let errorText {
Text(errorText) Text(errorText)
.font(.callout) .font(.callout)
@@ -74,6 +81,23 @@ struct PairSheet: View {
.frame(maxWidth: 1000) .frame(maxWidth: 1000)
.padding(60) .padding(60)
.onDisappear { token.cancelled = true } .onDisappear { token.cancelled = true }
.fullScreenCover(item: $editing) { field in
switch field {
case .pin:
TVTextEntry(
title: "PIN (shown in the host's log)", text: pin,
keyboardType: .numberPad
) {
pin = $0.trimmingCharacters(in: .whitespaces)
editing = nil
}
case .clientName:
TVTextEntry(title: "Device name", text: clientName) {
clientName = $0
editing = nil
}
}
}
#else #else
VStack(spacing: 0) { VStack(spacing: 0) {
Form { Form {
@@ -0,0 +1,90 @@
// The native tvOS text-entry experience: real tvOS apps never edit text inline
// selecting a field presents the SYSTEM full-screen keyboard (Apple's "Designing the
// Keyboard Input Experience"). UIKit gives that for free: a UITextField that becomes
// first responder presents the fullscreen keyboard UI with the field's placeholder as
// the prompt. SwiftUI's inline TextField on tvOS is an expanding pill with stray
// chrome this bridge replaces it everywhere on tvOS.
#if os(tvOS)
import SwiftUI
import UIKit
/// Present inside a fullScreenCover: immediately raises the system keyboard for one
/// value, then calls `onDone` with the result (also on Menu-button dismissal, with
/// whatever was typed so far match the system apps' "edits stick" behavior).
struct TVTextEntry: UIViewControllerRepresentable {
let title: String
let text: String
var keyboardType: UIKeyboardType = .default
let onDone: (String) -> Void
func makeUIViewController(context: Context) -> TVTextEntryController {
let controller = TVTextEntryController()
controller.configure(
title: title, text: text, keyboardType: keyboardType, onDone: onDone)
return controller
}
func updateUIViewController(_ controller: TVTextEntryController, context: Context) {}
}
final class TVTextEntryController: UIViewController, UITextFieldDelegate {
private let field = UITextField()
private var onDone: ((String) -> Void)?
private var finished = false
func configure(
title: String, text: String, keyboardType: UIKeyboardType,
onDone: @escaping (String) -> Void
) {
field.placeholder = title
field.text = text
field.keyboardType = keyboardType
field.returnKeyType = .done
self.onDone = onDone
}
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .clear
field.delegate = self
view.addSubview(field) // must be in a window to become first responder
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
field.becomeFirstResponder() // presents the tvOS fullscreen keyboard
}
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
textField.resignFirstResponder()
return true
}
func textFieldDidEndEditing(_ textField: UITextField) {
guard !finished else { return }
finished = true
onDone?(textField.text ?? "")
}
}
/// A Settings-app-style value row: label leading, current value trailing the whole
/// row is one system lozenge, and pressing it opens the fullscreen keyboard.
struct TVFieldRow: View {
let label: String
let value: String
let placeholder: String
let action: () -> Void
var body: some View {
Button(action: action) {
HStack {
Text(label)
Spacer()
Text(value.isEmpty ? placeholder : value)
.foregroundStyle(.secondary)
}
}
}
}
#endif