Skip to content

Input field loses focus after page reload - autofocus/focusOnInput() not working #17

Description

@cuter-doc0

Trying to use this kiosk browser on an android hand-held device with built-in barcode scanner; like what a delivery driver might have.

On page load or reload, the input text field does not automatically receive focus when running inside this kiosk browser. This means the user must manually tap the input field before every scan, which breaks a continuous barcode scanning workflow.

Steps to Reproduce:

  • Load a web page containing an input text field with autofocus or a focusOnInput() / focus() call on page load.
  • Input field on page is not in focus.
  • User taps on input field
  • Scan a barcode, data is sent to the field successfully.
  • Page reloads/refreshes for the next scan.
  • Observe that the cursor is no longer in the input field and the user must manually tap it again.

Expected Behaviour:
The input field should automatically receive focus on page load without requiring user interaction, as intended by the web application.

Actual Behaviour:
Focus is not set on the input field after page load inside the kiosk browser. The user must manually tap the field before each scan.

The same web page works correctly on Google Chrome on Android - focusOnInput() fires as expected and the cursor is ready immediately after page load. Scanning a barcode results in barcode data being in the input field immediately without user interaction.

This feature would be very useful for all kinds of browser-based kiosk scenarios; like ticket scanning kiosks, parking stations, loyalty points collection desks, retail POS, warehouse picking/receiving, etc.

I initially thought it was that mobile browsers don't support the autofocus/focusOnInput() - but testing with Chrome on android and Safari on iOS proved me wrong - so the issue is that whatever browser engine is under the hood of this kiosk app (I postulate) is simply ignoring the autofocus/focusOnInput() js...🤷‍♂️

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions