question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Issue Description

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

https://user-images.githubusercontent.com/26414794/187460819-c8d04292-57d2-4bb7-bd7e-6b76fb64bdcd.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 ?

Issue Analytics

  • State:closed
  • Created 5 months ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
AlexMiniAppscommented, Aug 31, 2022

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

1reaction
GuillaumeGasconcommented, Aug 31, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Type with the onscreen keyboard on iPhone - Apple Support
While typing text using the onscreen keyboard, touch and hold the Next Keyboard Emoji key or the Switch Keyboard key , then tap...
Read more >
Handling common accessibility problems - MDN Web Docs
Hopefully this article has given you a good grounding in the main accessibility problems you might encounter, and how to test and overcome ......
Read more >
Keyboard: keydown and keyup - The Modern JavaScript Tutorial
Focus on the input field and press a key.
Read more >
Set up your device to work with accessibility in Microsoft 365
This article has brief descriptions of accessibility settings that help people with disabilities for Windows, Mac, Android, and iOS devices.
Read more >
Use the on-screen keyboard - Chromebook Help
To type or handwrite text, or to add images to files, documents, and emails, you can use your Chromebook's on-screen keyboard. Tip: To...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found