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: ion-input not working properly with vite and @ionic/core #30323

Open
3 tasks done
DeJy opened this issue Apr 1, 2025 · 13 comments
Open
3 tasks done

bug: ion-input not working properly with vite and @ionic/core #30323

DeJy opened this issue Apr 1, 2025 · 13 comments
Assignees
@christian-bromann

Comments

@DeJy
Copy link

DeJy commented Apr 1, 2025

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

Ion-input is not displayed correctly when I'm building my vanilla js project with vite.js. It works with version 7, but not with version 8. sc-ion-input-md is class is missing from the input tag.

Expected Behavior

ion-input should display as ionic component and not standard html.

Steps to Reproduce

  1. see stackblitz.com project

Code Reproduction URL

https://stackblitz.com/edit/sb1-tqcwwalu?file=package.json

Ionic Info

Issue is with all v8 versions

Additional Information

No response
@ionitron-bot ionitron-bot bot added the triage label Apr 1, 2025
@brandyscarney brandyscarney added the needs: investigation This issue is waiting on more investigation from the Ionic Team. label Apr 1, 2025
@ionitron-bot ionitron-bot bot removed the triage label Apr 1, 2025
@brandyscarney
Copy link
Member

Thank you for the issue! It looks like this broke in @ionic/[email protected] with the update of Stencil to @stencil/[email protected]. I have added needs investigation to this ticket so that we can look into this further. I also created a dev build that downgrades Stencil if you would like to test that out: npm i @ionic/[email protected]

@brandyscarney
Copy link
Member

Additionally, I noticed adding this script to the <head> of the index.html works to include the styles if you want to try that approach until we find a solution:

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>

@DeJy
Copy link
Author

DeJy commented Apr 1, 2025

this one is working as expected: @ionic/[email protected]

@christian-bromann christian-bromann self-assigned this Apr 3, 2025
@christian-bromann
Copy link
Member

@DeJy what do you mean by ion-input should display as ionic component and not standard html.?

Are you expecting Ionic to render the component as follows:

- <ion-input label="Fixed label" label-placement="fixed" placeholder="Enter text" class="sc-ion-input-md-h sc-ion-input-md-s md input-label-placement-fixed in-item hydrated">
+ <ion-input label="Fixed label" label-placement="fixed" placeholder="Enter text" class="sc-ion-input-md sc-ion-input-md-h sc-ion-input-md-s md input-label-placement-fixed in-item hydrated">
   <!---->
   <label class="input-wrapper" for="ion-input-0">
      <div class="label-text-wrapper">
         <div class="label-text">Fixed label</div>
      </div>
      <div class="native-wrapper sc-ion-input-md-s"><input class="native-input" id="ion-input-0" autocapitalize="off" autocomplete="off" autocorrect="off" name="ion-input-0" placeholder="Enter text" spellcheck="false" type="text"></div>
   </label>
</ion-input>

?

@DeJy
Copy link
Author

DeJy commented Apr 3, 2025

I'm expecting this

<ion-input label-placement="fixed" class="sc-ion-input-md-h sc-ion-input-md-s md input-label-placement-fixed hydrated">
   <label class="input-wrapper sc-ion-input-md" for="ion-input-0">
     <div class="label-text-wrapper sc-ion-input-md">
       <div class="label-text sc-ion-input-md">Fixed label</div>
     </div>
     <div class="native-wrapper sc-ion-input-md sc-ion-input-md-s">
       <input class="native-input sc-ion-input-md" id="ion-input-0" autocapitalize="off" autocomplete="off" autocorrect="off" name="ion-input-0" placeholder="Enter text" spellcheck="false" type="text" />
     </div>
     <div class="input-highlight sc-ion-input-md">
     </div>
   </label>
 </ion-input>

But I'm getting this

<ion-input label-placement="fixed" class="sc-ion-input-md-h sc-ion-input-md-s md input-label-placement-fixed hydrated">
   <label class="input-wrapper" for="ion-input-0">
     <div class="label-text-wrapper">
       <div class="label-text">
         Fixed label
       </div>
     </div>
     <div class="native-wrapper sc-ion-input-md-s">
       <input class="native-input" id="ion-input-0" autocapitalize="off" autocomplete="off" autocorrect="off" name="ion-input-0" placeholder="Enter text" spellcheck="false" type="text" />
     </div>
     <div class="input-highlight">
     </div>
   </label>
 </ion-input>

@DeJy
Copy link
Author

DeJy commented Apr 4, 2025

The issue is not only with ion-input. As you can see in the example below, ion-alert that is opening from the ion-select doesn't have the right format.
https://stackblitz.com/edit/sb1-tqcwwalu?file=package.json

@christian-bromann
Copy link
Member

Identified the responsible change in Stencil: stenciljs/core#5892

@christian-bromann
Copy link
Member

@DeJy can you help me understand what you are using the class names for?

@DeJy
Copy link
Author

DeJy commented Apr 4, 2025 •
edited
Loading

I'm not usign any specific ionic class names or ovewrite any of them in my custom css.
I'm just using this code <ion-input label="Fixed label" label-placement="fixed" placeholder="Enter text"></ion-input> which doesn't transpile and display correctly (see stackblitz exemple) when building my code with Vite and @ionic/core version 8.5.3. it works well with version 7.x..x of Ionic and with that build: @ionic/[email protected]

The example of the html above is the outcome of the build when I use version 8.5.3 (not working/not expected) vs 7.x.x (working/expected)

I hope this answers your question.

@christian-bromann christian-bromann mentioned this issue Apr 4, 2025
Merged
2 tasks
@christian-bromann
Copy link
Member

Thanks for your feedback @DeJy - I've identified the issue and raised a PR with a fix in stenciljs/core#6224

@christian-bromann christian-bromann removed the needs: investigation This issue is waiting on more investigation from the Ionic Team. label Apr 4, 2025
@christian-bromann
Copy link
Member

A fix is on its way in #30132

@christian-bromann
Copy link
Member

I published a dev build which resolves the issue: 8.5.4-dev.11743814940.14e938eb. I will work with the Ionic team to get the PR merged and published.

@DeJy
Copy link
Author

DeJy commented Apr 6, 2025 •
edited
Loading

@christian-bromann There is still an issue with LoadingController with the dev build (see here: https://stackblitz.com/edit/sb1-tqcwwalu?file=package.json), icon in the ion-spinner is not moving. The Loading pop-up style is now good, but the icon is not spinning as expected. Standalone ion-spinner is working well.

@christian-bromann christian-bromann mentioned this issue Apr 7, 2025
Merged
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@christian-bromann christian-bromann

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@christian-bromann @brandyscarney @DeJy