Ionic-framework: Ionic 4 - Ion-Input autofocuses every time

[damiant]

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.

[jgrassini]

readonly is a boolean attribute.

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
https://stackoverflow.com/a/25449778

List of boolean attributes:
https://gist.github.com/ArjanSchouten/0b8574a6ad7f5065a5e7

[damiant]

The issue is in input.tsx and relates also to the properties of disabled, multiple, required, & autofocus as shown in bold below....

input.tsx
return [
ref={input => this.nativeInput = input as any}
aria-disabled={this.disabled ? 'true' : false}
accept={this.accept}
autoCapitalize={this.autocapitalize}
autoComplete={this.autocomplete}
autoCorrect={this.autocorrect}
autoFocus={this.autofocus}
class={themedClasses}
disabled={this.disabled}
inputMode={this.inputmode}
min={this.min}
max={this.max}
minLength={this.minlength}
maxLength={this.maxlength}
multiple={this.multiple}
name={this.name}
pattern={this.pattern}
placeholder={this.placeholder}
results={this.results}
readOnly={this.readonly}
required={this.required}
spellCheck={this.spellcheck}
step={this.step}
size={this.size}
type={this.type}
value={this.value}
onInput={this.onInput.bind(this)}
onBlur={this.onBlur.bind(this)}
onFocus={this.onFocus.bind(this)}
onKeyDown={this.inputKeydown.bind(this)}
/>

[cjorasch]

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.

[paulstelzer]

I think this is fixed already. Only if I use autofocus, it will open the keyboard on iOS and it worked in Chrome , too

[pickfire]

@cjorasch Same, I can't get autofocus to work in Firefox and Chromium on 4.0.0-rc.0 as well.

[paulstelzer]

I close this for now because it should fixed with #17043 . After rc.2 release you can check again and if it still not working, just create a comment here and I reopen

[ionitron-bot[bot]]

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.