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.

bug: ionic input component in @ionic/core/@5.0.6+ is not backward compatible

See original GitHub issue

Bug Report

Ionic version:

[x] @ionic/core@5.x

@stencil/core@1.8.x @ionic/core@5.0.6-5.0.7

Current behavior:

When using @stencil/core@1.8.x and @ionic/core/@5.0.7 the ionic input doesn’t work properly. In specific, ion-label inside ion-item doesn’t align properly, also the popup of ion-select cannot be clicked.

The inappropriate layout in the current release: 2

Expected behavior:

The ion-label should align consistently, and the pop up of ion-select should be clickable as in 5.0.5.

The working appearance in previous release: 1

Steps to reproduce:

Try to run the project with below library version combination

@stencil/core @ionic/core works or not
1.8.8 5.0.5 Y
1.8.11 5.0.5 Y
1.8.11 5.0.6 N
1.8.11 5.0.7 N
1.12.1 5.0.6 Y
1.12.1 5.0.7 Y

Related code:

<ion-list>
  <ion-item>
    <ion-label position='stacked'> Label 1 </ion-label>
    <ion-select>
      <ion-select-option value='1'> option 1 </ion-select-option>
      <ion-select-option value='2'> option 2 </ion-select-option>
    </ion-select>
  </ion-item>
  <ion-item>
    <ion-label position='stacked'> Label 2 </ion-label>
    <ion-input type='text'/>
  </ion-item>
  <ion-item>
    <ion-label position='stacked'> Label 3 </ion-label>
    <ion-textarea/>
  </ion-item>
</ion-list>

Other information:

The bug appears on desktop Firefox, Chrome and Android Chrome. (not tested other environment)

Ionic info:

Ionic:

   Ionic CLI : 6.3.0 

Capacitor:

   Capacitor CLI   : 1.5.2
   @capacitor/core : 1.5.0

Utility:

   cordova-res : 0.11.0
   native-run  : not installed

System:

   NodeJS : v12.13.0 
   npm    : 6.14.4
   OS     : Linux 5.4

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
liamdebeasicommented, Apr 3, 2020

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue?

0reactions
ionitron-bot[bot]commented, May 7, 2020

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

ion-input: Custom Input Value Type Styling and CSS Properties
The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same...
Read more >
ionic and angular ngModel not working undefined
Solved. As @Pankaj Sati says, it is needed to add FormsModule and IonicModule to the module.ts file:
Read more >
Ionic Tutorial #9 - Error message component for form validation
Ionic Framework Tutorial: creating error messages component for our form validation error messages.Links: Ionic Framework: ...
Read more >
App Rejected - Ion-Input Login Iss… | Apple Developer Forums
I am using React + Ionic/Capacitor for my iOS app and keep getting my app rejected due to the reviewer being unable to...
Read more >
Date picker popup in Ionic 6 | Damir's Corner
The ion-popover component can be used to achieve similar behavior to Ionic 5, so that the layout of pages with a date picker...
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