ion-input type text not working with undefined initial value in FormGroup formControl

[hebra]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.8
   @angular-devkit/core       : 0.8.1
   @angular-devkit/schematics : 0.8.1
   @angular/cli               : 6.2.1
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, browser 5.0.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.3, (and 14 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/heb/Library/Android/sdk)
   ios-deploy        : 2.0.0
   NodeJS            : v10.10.0 (/usr/local/Cellar/node/10.10.0/bin/node)
   npm               : 6.4.1
   OS                : macOS
   Xcode             : Xcode 10.0 Build version 10L232m```

**Describe the Bug**
When using ion-input type text together with a FormControl where the initial value is empty (or null, undefined) then:
- no placeholder text visible, even though a placeholder attribute is set on the tag
- input itself is not accessible/clickable at all

As soon as at least one value, even just a whitespace is added as initial value everything works fine. Also the placeholder text is displayed properly once the initial whitespace was removed.

**Steps to Reproduce**
Steps to reproduce the behavior:
1. Create a form with an ion-list with an ion-item and an ion-input type text inside
2. in the TS file create a new FormGroup with a form control for that input, set the initial value to undefined (or null)
3. bind the form group to the form and set the formControlName of the input to the key you chose in the FomGroup definition
4. start the app and open it in a browser
5. the input is not accessible
6. Change the initial value to empty string ''
7. reload
8. it is working

**Expected Behavior**
The ion-input should behave the same both for empty string and undefined initial value.

[paulstelzer]

Did you added the FormsModule to your module.ts ? Please upload a repository to check it because I have no problems with FormControl in combination with Ionic 4

[ptitjes]

@paulstelzer No, I can confirm that. I was to open that issue too.

It only happens when you have an initial null value for the FormControl of the ion-input. Then the shadow root tree have no control at all...

I can also tell it is a regression in @ionic/angular@4.0.0-beta.8. It does work correctly when pinning the versions of @ionic/core and @ionic/angular to 4.0.0-beta.7.

[ptitjes]

@paulstelzer Yep, as stated by @hebra. However, this is important to handle null values as before (that is when the field is not touched then a null value is kept).

[ptitjes]

Some StackBlitz with beta.7 that works: https://stackblitz.com/edit/angular-ionic-v4b7-ion-input.

The same with beta.8 can't even load because of some packaging problem of beta.8 (https://stackblitz.com/edit/angular-ionic-v4b8-ion-input for reference).

Anyway, just export the beta.7 version locally and change the @ionic/angular version to beta.8, and you'll see the problem.

[marticrespi]

Doesn't work with type text but is not working with other types, like password or email. Only works with type number in beta 8 if the initial value is null.

[ptitjes]

It seems that this issue is resolved by 83543b7.

Can we have a release ?

[paulstelzer]

If you cannot wait, just build it yourself - download the repo and run npm run build after installation of the node modules - but I think i new beta release will coming soon ;)

[ptitjes]

@paulstelzer Already did it! That's why I can tell this issue is fixed... :P

However I am unable to npm link @ionic/core and @ionic/angular (I have a strange error when running my app...). So this is a bit precarious as I manually copy the css, dist and loader directories to my node_modules directory.

[ptitjes]

I confirm that this is fixed in 4.0.0-beta.9. This issue can be closed.

[ionitron-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.