MobileKeyboard, input & camera

Keyboard, input & camera

Native input quirks that the web never hits. These are shell configuration concerns (Capacitor + native manifests), documented here so screens behave predictably.

Keyboard must resize the view

By default the soft keyboard overlays the WebView, covering the action buttons of centered dialogs (e.g. PIX modals, where the OK button disappears). Fix it at the shell level so dialogs reposition above the keyboard.

  • Capacitor Keyboard.resize: 'native' resizes the WebView/window when the keyboard shows. 'body' does not move position: fixed dialogs; 'none' does nothing.
  • Android additionally needs android:windowSoftInputMode="adjustResize" on the main activity for the resize to take effect.

Rule of thumb: a centered dialog with an input near the bottom must keep its primary button visible while typing. If it doesn’t, the keyboard resize is misconfigured.

Camera & QR scanning

The PIX QR scanner reads the camera through the WebView (getUserMedia). The OS blocks the camera entirely without a usage declaration:

  • iOS: NSCameraUsageDescription in Info.plist.
  • Android: <uses-permission android:name="android.permission.CAMERA" /> (and an optional, non-required uses-feature).

Without these, the scanner silently fails on device. There is nothing to fix in the web code.

Paste vs scan

The scanner offers two entry points that must stay distinct:

  • Scan QR → opens the camera (on a device) / paste field (on desktop, no camera).
  • Paste / Colar → always opens the manual paste field, never the camera.

A single “open scanner” handler that decides camera-vs-paste purely by device makes the paste button open the camera on phones. Pass an explicit forcePasteOnly for the paste action.

Static vs dynamic PIX

The parser supports static BR Codes (the PIX key is embedded in subfield 26.01). Dynamic “QR de cobrança” codes carry a URL in subfield 26.25 and require fetching the signed payload from the PSP, which is not yet supported, surfaced as a clear “dynamic not supported” message rather than a generic error.

Input hygiene on native

  • Set the right inputMode / type so the correct keyboard appears (decimal for money, email, tel).
  • Keep the submit button reachable above the keyboard; rely on the resize above rather than custom scroll hacks.
  • Use active: press states; there is no hover on touch.