The cursor is blinking outside the text field. Can you help me, please?

Ionic Framework
1

image
image498×763 78.1 KB

I used ion-textarea (version 8):

<ion-textarea rows="1" mode="ios" type="text" autoGrow="true" maxlength="1000"></ion-textarea>

ion-textarea {
 
    --background: #fff;
    transition: all 0.3s ease;
    font-size: 15px;
    caret-color: var(--ion-color-primary);
    box-shadow: var(--box-shadow);
    border-radius: 1.5rem;
    
    --placeholder-opacity: 1;
    --border-width: 2px;
    --border-color: #000;
    --padding-end: 1rem;
    --padding-start: 1rem;
    --padding-top: 0.5rem;
    --padding-bottom: 0.5rem;
    overflow: hidden;
    border: 2px solid #fff;
    opacity: 1 !important;
    transition: all 350ms ease;
    --placeholder-font-weight: 100;
    max-height: 12rem;


  .textarea-wrapper.sc-ion-textarea-md {
    height: 100%;
  }

The cursor is blinking outside the text field on IOS. The worse is that this blinking stays on even when the page is scrolled, and shows through other modal elements like header and sub-header.

Can you help me, please ?

2

Can you share the code for your full component?

3 
ion-textarea {
 
    --background: #fff;
    transition: all 0.3s ease;
    font-size: 15px;
    caret-color: var(--ion-color-primary);
    box-shadow: var(--box-shadow);
    border-radius: 1.5rem;
    
    --placeholder-opacity: 1;
    --border-width: 2px;
    --border-color: #000;
    --padding-end: 1rem;
    --padding-start: 1rem;
    --padding-top: 0.5rem;
    --padding-bottom: 0.5rem;
    overflow: hidden;
    border: 2px solid #fff;
    opacity: 1 !important;
    transition: all 350ms ease;
    --placeholder-font-weight: 100;
    max-height: 12rem;


  .textarea-wrapper.sc-ion-textarea-md {
    height: 100%;
  }

The cursor is blinking outside the text field. The worse is that this blinking stays on even when the page is scrolled, and shows through other modal elements like header and sub-header. Can you help me, please?

image
image339×587 69 KB

4

Is this only happening on iOS? Not Android or web?

You probably need to provide a minimal reproduction of this in either a GitHub/GitLab repo or StackBlitz so someone can test/debug it themselves.

5

This error both IOS and Android. And currently This error from Ionic component.

I checked webiste :

image
image384×684 54.5 KB