Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug: Setting focus on startup #2694

Closed
1 of 4 tasks
ThomasKientz opened this issue Apr 4, 2020 · 1 comment · Fixed by #2719
Closed
1 of 4 tasks

bug: Setting focus on startup #2694

ThomasKientz opened this issue Apr 4, 2020 · 1 comment · Fixed by #2719

Comments

@ThomasKientz
Copy link

ThomasKientz commented Apr 4, 2020 •
edited
Loading

Bug Report

Capacitor Version

npx cap doctor output:

Latest Dependencies:
  @capacitor/cli: 2.0.0
  @capacitor/core: 2.0.0
  @capacitor/android: 2.0.0
  @capacitor/electron: 2.0.0
  @capacitor/ios: 2.0.0

Installed Dependencies:
  @capacitor/ios not installed
  @capacitor/electron not installed
  @capacitor/android 2.0.0
  @capacitor/cli 2.0.0
  @capacitor/core 2.0.0

Affected Platform(s)

  • Android
  • iOS
  • Electron
  • Web

Current Behavior

Autofocus on an <input> doesn't work if the user hasn't "interact" with the webview before (touch anywhere on the screen after the splashscreen is gone). The input is not focused, neither is the keyboard shown.

BUT if we tap somewhere on the screen then triggering focus (eg with a settimeout), it works.
Android issue only.

Expected Behavior

Setting focus to an input to work even at startup.

Sample Code or Sample Application Repo

I have used npx @capacitor/cli create to create a minimalist project.

Here is the body of index.html

<body>
    <input type="text" id="mytext" placeholder="autofocus" />

    <script src="capacitor.js"></script>
    <script>
      Capacitor.Plugins.SplashScreen.hide();
      setTimeout(() => {
        document.getElementById("mytext").focus();
        console.log("FOCUS");
      }, 3000);
    </script>
  </body>

Reproduction Steps

1- Launch the app
2- Focus on an input document.getElementById("mytext").focus(); without tapping / clicking anywhere before.

I have added a timeout, so I have time to "interact" with the app after the splash screen is hidden. When I do so, the input is focused with no issue.

When I say "interact", I mean to simply touch/click anywhere on the webview, like below the input on the rest of the page (in a blank area).

Other Technical Details

npm --version output: 6.13.7

node --version output: v13.8.0

Other Information

My note taking app (Android Apple) relies heavily on UX and showing as soon as possible a focused input with the keyboard up and running is major concern. Unfortunately it is not working anymore since upgrading to capacitor from cordova.
@jcesarmobile jcesarmobile mentioned this issue Apr 7, 2020
Merged
@ionitron-bot
Copy link

ionitron-bot bot commented Nov 12, 2022

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Nov 12, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(android): input autofocus and javascript focus not working jcesarmobile/capacitor
1 participant
@ThomasKientz