Ionic-framework: bug: no blinking cursor on empty input when using stacked labels

[mattdelliott]

Bug Report

Ionic version:
[ ] 4.x
[x] 5.x

Current behavior:
When using a stacked label inside of an IonItem containing an IonInput, the cursor will not blink in Safari unless the input has entry.

Expected behavior:
Focusing the field will show the native blinking cursor

Steps to reproduce:

• Run example code
• Open in Safari (Tested on v13.1.2 and v14.0)
• Click on the input

Related code:
https://github.com/mattdelliott/ionic-safari-cursor-bug

<IonList>
          <IonItem>
            <IonLabel position="stacked">Testing</IonLabel>
            <IonInput />
         </IonItem>
</IonList>

Other information:

Ionic info:

[brandyscarney]

Thanks for the issue! I believe this is a bug in webkit due to delegatesFocus cc @liamdebeasi

[liamdebeasi]

Thanks! This does look like a WebKit bug. I have filed an issue with the WebKit team: https://bugs.webkit.org/show_bug.cgi?id=215731.

There is a workaround we can apply to the framework, so I will put up a PR for that.

[mattdelliott]

Awesome, thanks everyone!

[liamdebeasi]

Can you try the following dev build and let me know if it resolves the issue?

npm i @ionic/[email protected]

[mattdelliott]

Yep, works beautifully.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/21949, and a fix will be available in an upcoming release of Ionic Framework.

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