Skip to main content

Keyboard

Hosanna supports text input through framework controls and through platform input adapters. TV-style remote navigation and browser keyboard input are separate concerns: remote keys move focus, while keyboard controls capture text.

TextInput​

TextInput is the primary control for editable text. It supports placeholders, password mode, icons, style keys, text-change events, and submit events.

TextInput({
  placeholderText: 'Enter your name',
  width: 600,
  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.
  • password: hide entered text.
  • iconUri: optional icon inside the input.
  • height and width: control size.
  • onTextChange: update app state when text changes.
  • onSubmit: respond to OK, Enter, or platform submit.

MiniKeyboard and NativeMiniKeyboard​

Use compact keyboards for short values such as PINs, codes, search fragments, and constrained text.

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

NativeKeyboard​

Use NativeKeyboard for full platform keyboard entry where a native keyboard is available.

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 and keyboard shims.

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 web simulator 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 MiniKeyboard or 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.