Skip to content

Upgrading to Svelte 4 breaks password ion-inputs styling #95

@andonimichael

Description

@andonimichael

When upgrading to Svelte 4 (both 4.0.0 and the newest release 4.2.9) all type="password" ion-inputs lose their styling. This seems to be due to adding the parameters to both the <ion-input> and underlying <input> tags, whereas previously they would only appear on the <input> tags. Removing the type="password" restores the underlying style and functionality.

Additionally, on mobile, this breaks the input keyboard, which gets stuck at the bottom of the screen.

Previous HTML:
Screenshot 2024-01-21 at 2 01 33 PM

After upgrading to Svelte 4:
Screenshot 2024-01-21 at 2 01 00 PM
Screenshot 2024-01-21 at 2 10 10 PM

Example code:

<ion-list>
    <ion-item>
        <ion-input
            name="password"
            type="password"
            label="Password:"
            label-placement="floating"
            autocomplete="current-password"
            autocapitalize="off"
            inputmode="text"
            spellcheck={false}
            clear-on-edit
            required
            />
    </ion-item>
</ion-list

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions