Need to press keyboard key twice to go change the input that have the focus on iOS

[GuillaumeGascon]

Hello,

I'm currently facing an issue with angular-code-input on iOS 15.6.1 and ionic 6.

When i try to enter a number, i've to press my keyboard key twice to switch to the other input.

HTML:

<code-input
        #codeInput
        class="gray"
        [codeLength]="6"
        [initialFocusField]="6"></code-input>

CSS:

code-input {
  --item-height: 46px !important;
  --item-spacing: 0 !important;
  --item-border: unset !important;
  --item-border-bottom: unset !important;
  --item-border-focused: unset !important;
  --item-border-bottom-focused: unset !important;
  --item-border-has-value: unset !important;
  --item-border-bottom-has-value: unset !important;
  --item-shadow-focused: unset !important;
  --item-border-radius: 8px !important;
  --item-background: var(--ion-color-gray-contrast) !important;
  --color: var(--ion-color-gray-shade) !important;
  font-size: 24px !important;
  line-height: 30px !important;
  font-weight: 600 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible;
  &.gray {
    --item-background: var(--ion-color-light-tint) !important;
    span {
      &.empty {
        &::after {
          background: var(--ion-color-light-shade);
        }
      }
      input {
        text-transform: uppercase !important;
      }
    }
  }
  &.has-error {
    --item-background: var(--ion-color-danger-tint) !important;
    span {
      border: 1px solid var(--ion-color-danger);
      border-radius: 8px;
      &.empty::after {
        background: var(--ion-color-danger);
      }
    }
  }
  span {
    width: 48px;
    height: 48px;
    margin-right: 4px;
    position: relative;
    z-index: 5;
    border: 1px solid transparent;
    &:last-child {
      margin-right: 0;
    }
    &.empty {
      display: flex !important;
      justify-content: center;
      &::after {
        content: "";
        position: absolute;
        bottom: 8px;
        width: 24px;
        height: 2px;
        background: var(--ion-color-separator);
        margin: 0 auto;
        z-index: 10;
      }
    }
    input {
      text-transform: uppercase !important;
    }
  }
}

Video

RPReplay_Final1661868017.MP4.1.mp4

Package.json:

    "@angular/common": "~13.2.2",
    "@angular/core": "~13.2.2",
    "@angular/forms": "~13.2.2",
    "@capacitor/android": "^3.7.0",
    "@capacitor/ios": "^3.7.0",
    "@ionic/angular": "^6.2.3",
    "angular-code-input": "^1.6.0",

I don't really understand what's wrong cause it's working on ionic 6 + android and on my web app on chrome, firefox, safari, etc.

Can you please help me figured out what's going on ?

[AlexMiniApps]

@GuillaumeGascon Hi, I will check the case.

[GuillaumeGascon]

@AlexMiniApps thank's !

[TiBz0u]

Hi @GuillaumeGascon ,
We use version 1.5.0 in production and it's working perfectly on last iOS 15 version.
Can you explain why you have initialFocusField at 6? Normally, you should have an error.
Kr.

[GuillaumeGascon]

@TiBz0u for the initialFocusField it's a mistake.
I've tried to use 1.5.0 but i get the same problem as shown in my video. I really don't understand because it's working on all other platform except on iOS.

[GuillaumeGascon]

Ok, i managed to find what's wong !

So in my CSS i do this:

  &.empty {
      display: flex !important; <-- this line is the problem
      justify-content: center;
      &::after {
        content: "";
        position: absolute;
        bottom: 8px;
        width: 24px;
        height: 2px;
        background: var(--ion-color-separator);
        margin: 0 auto;
        z-index: 10;
      }
    }

So it appear for some reason that put .empty in display flex create the problem on iOS, so i've change my css for this:

  &.empty {
      &::after {
        content: "";
        position: absolute;
        bottom: 8px;
        width: 24px;
        height: 2px;
        left: 12px;
        background: var(--ion-color-separator);
        margin: 0 auto;
        z-index: 10;
      }
    }

Have a nice day !

[AlexMiniApps]

@TiBz0u @GuillaumeGascon Thank you guys! You save my time :) Much appreciated.