fix(apple/tvOS): system fullscreen keyboard for all text entry — no inline fields
ci / rust (push) Has been cancelled
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:
@@ -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
|
||||||
Reference in New Issue
Block a user