Skip to main content

Keyboard

Hosanna supports text input through framework controls and platform input adapters. TV remote navigation and editable text are separate concerns: input adapters move framework focus, while an input control or native keyboard owns text entry.

TextInput

TextInput is the primary form control. Its renderMode can be auto, tv, web, or mobile. In auto, phone/tablet native runtimes use the mobile control, phone/tablet web runtimes use the DOM-backed control, and lean-back layouts use the TV keyboard dialog.

TextInput({
placeholderText: 'Enter your name',
width: 600,
inputType: TextInputType.Text,
styleKey: 'controls.TextInput.default',
}).onTextChange(event => {
this.name = event.text;
});

Common fields and handlers:

  • placeholderText: copy shown when the field is empty.
  • text: current value.
  • inputType: Text, Password, Number, or Email.
  • iconUri: optional icon inside the input.
  • height and width: control size.
  • onTextChange: update app state when text changes.
  • onSubmit: native web/mobile edit controls only; the TV dialog reports accepted text through onTextChange.
  • focusNativeInput() / blurNativeInput(): mobile IME helpers; they are no-ops in TV and web render modes.

MiniKeyboard and NativeMiniKeyboard

NativeMiniKeyboard is the direct DynamicMiniKeyboard primitive and observes its native text field. It is suitable for compact, inline TV entry.

NativeMiniKeyboard({ placeholderText: 'Type here...' })
.onTextChange(event => {
this.code = event.text;
});

The separate MiniKeyboard control exposes text, domain, and onTextChange, but the current implementation observes a renderer field named test instead of text. Do not rely on its change callback until that source defect is fixed; use NativeMiniKeyboard or TextInput instead.

NativeKeyboard

NativeKeyboard is the full inline DynamicKeyboard primitive. Its default size is 1395 × 570; NativeMiniKeyboard defaults to 575 × 721.

NativeKeyboard()
.placeholderText('Enter text...')
.onTextChange(event => {
this.description = event.text;
});

Web Keyboard Adapters

On web, keyboard behavior is controlled by input adapters:

  • keyboard: maps browser keyboard events to Roku-style remote input. Arrow keys move focus, Enter selects, and Backspace acts as Back.
  • webkeyboard: enables browser keyboard input events for text-focused paths.
  • roku: enables the Roku emulation profile.

Use ?adapters= to filter adapters during testing:

?adapters=keyboard
?adapters=webkeyboard
?adapters=roku,touch

When a native HTML input, textarea, or button has browser focus, the browser runtime avoids intercepting keys as remote input. Click the app background to route keys back into Hosanna remote navigation.

Best Practices

  • Use TextInput for normal form fields.
  • Use NativeMiniKeyboard for short TV-first entry.
  • Use NativeKeyboard when the platform should own full text entry.
  • Keep app state in sync with onTextChange.
  • Use ?adapters=webkeyboard only when you intentionally need browser text-entry behavior in web testing.
Talk to us