question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ionic 4 - Ion-Input autofocuses every time

See original GitHub issue

Bug Report

@mhartington

Ionic Info

cli packages: (/usr/local/lib/node_modules)

   @ionic/cli-utils  : 2.0.0-rc.6
   ionic (Ionic CLI) : 4.0.0-rc.6

global packages:

   cordova (Cordova CLI) : 8.0.0

local packages:

   @angular-devkit/core       : 0.6.8
   @angular-devkit/schematics : 0.6.8
   @angular/cli               : 6.0.8
   @ionic/schematics-angular  : 1.0.0-rc.6
   Cordova Platforms          : android 7.1.0 ios 4.5.4
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7

System:

   NodeJS : v8.10.0
   npm    : 6.1.0
   OS     : macOS High Sierra
   Xcode  : Xcode 9.4 Build version 9F1027a

Environment Variables:

   ANDROID_HOME : not set

Describe the Bug All ion-input tags will autofocus in IOS. This is because they add autofocus=“false” by default but the presence of the attribute autofocus will cause the input to autofocus regardless of the value. Note: this seems to be ok in Google Chrome but when deployed to IOS with wkwebview the problem surfaces.

Steps to Reproduce Steps to reproduce the behavior:

  1. Place an ion-input in a form
  2. Build and deploy the ionic app for IOS
  3. The input will be focused and the keyboard will appear

Expected Behavior By default there should not be autofocus in the generated input tag. If ion-input has the property of autofocus=“true” then the input tag should have an attribute of autofocus (doesnt require a value)

Additional Context Tested with IOS 11.4 on an iPhoneX. Note: problem may occur with chrome but isnt as visible as it doesnt cause an onscreen keyboard to appear.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

4reactions
cjoraschcommented, Sep 12, 2018

4.0.0-beta.8

I am not able to get the autofocus property to work on either Chrome or Safari for desktop web.

It looks like the attribute gets set on the element but it never receives focus.

I am attempting to use it in modal dialogs to place the cursor in the first input but have not been able to get it to work for either ion-input or ion-textarea elements.

0reactions
ionitron-bot[bot]commented, Feb 12, 2019

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 Ionic, please create a new issue and ensure the template is fully filled out.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Auto focus input field in ionic 5
I found the autofocus directive for ion-input, but the problem is it works like 50% of the times, when it feels like it...
Read more >
Ionic 4 - Ion-Input autofocuses every time · Issue #14619
All ion-input tags will autofocus in IOS. This is because they add autofocus="false" by default but the presence of the attribute autofocus will ......
Read more >
Ionic v4 - how do I autofocus on a Input? - Stack Overflow
How can I auto focus on this input? What have I tried. @ViewChild('codigobarras') input_codigobarras: Input; ... ionViewDidEnter() { this.
Read more >
Set auto focus to ionic input in Ionic 6 and Angular 13
I stumbled upon setting focus to an element in Ionic. As it appeared, there is no directive to use (anymore) to autofocus an...
Read more >
Auto-focus Input and Open Keypad On View/ Page Load in ...
Auto-focus Input and Open Keypad On View/ Page Load in Ionic 3 Application ... Mobile applications having input fields for search or forms...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found