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 moveposition: fixeddialogs;'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:
NSCameraUsageDescriptioninInfo.plist. - Android:
<uses-permission android:name="android.permission.CAMERA" />(and an optional, non-requireduses-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/typeso the correct keyboard appears (decimalfor 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.