Page jump in iphone on edit. iOS 12 about angular-code-input HOT 10 OPEN

Hi Sir, Please update how to solve this because I am now frustrated for this issue. Page are jump on input focus in iOS.

from angular-code-input.

@Nitekurs Hi, this library utilizes native focus() function for focusing - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus, therefore I am not sure that this is the lib issue.

Please provide the following:

1. Some video with the demo of the issue
2. Configuration of the library
3. The source code which is worked with the library

from angular-code-input.

Hi AlexMiniApps ,

1. Video: -
   https://user-images.githubusercontent.com/48058350/129565402-bb8bfc14-765f-429e-bd5f-52a65ff3b8cf.mp4

2. Configuration is done as per mentioned in this site(https://www.npmjs.com/package/angular-code-input)
   Configuration of the library : - "angular-code-input": "^1.5.0"(package.json)

3. I am using this source code
   `<code-input
   class="code-input"
   [isCodeHidden]="false"
   [codeLength]="6"
   [isPrevFocusableAfterClearing]="false"
   [isFocusingOnLastByClickIfFilled]="false"

`

from angular-code-input.

@Nitekurs Thank you
Please also send the following:

1. Device model
2. iOS version
3. package.json
4. The source code of the page/component where the code-input component is being built in

from angular-code-input.

1. iphone 6 (Almost in all iPhone)
2. 12.4.2
3. package.json
   `{
   "name": "mpin-app",
   "version": "0.0.0",
   "scripts": {
   "ng": "ng",
   "start": "ng serve",
   "build": "ng build",
   "watch": "ng build --watch --configuration development",
   "test": "ng test"
   },
   "private": true,
   "dependencies": {
   "@angular/animations": "~12.1.1",
   "@angular/common": "~12.1.1",
   "@angular/compiler": "~12.1.1",
   "@angular/core": "~12.1.1",
   "@angular/forms": "~12.1.1",
   "@angular/platform-browser": "~12.1.1",
   "@angular/platform-browser-dynamic": "~12.1.1",
   "@angular/router": "~12.1.1",
   "angular-code-input": "^1.5.0",
   "cordova": "^10.0.0",
   "rxjs": "~6.6.0",
   "tslib": "^2.2.0",
   "zone.js": "~0.11.4"
   },
   "devDependencies": {
   "@angular-devkit/build-angular": "~12.1.1",
   "@angular/cli": "~12.1.1",
   "@angular/compiler-cli": "~12.1.1",
   "@types/jasmine": "~3.6.0",
   "@types/node": "^12.11.1",
   "jasmine-core": "~3.7.0",
   "karma": "~6.3.0",
   "karma-chrome-launcher": "~3.1.0",
   "karma-coverage": "~2.0.3",
   "karma-jasmine": "~4.0.0",
   "karma-jasmine-html-reporter": "^1.5.0",
   "typescript": "~4.3.2"
   }
   }
4. app.component.html

<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <code-input [isCodeHidden]="true" [codeLength]="6" (codeChanged)="onCodeChanged($event)" (codeCompleted)="onCodeCompleted($event)"> </code-input>

app.module.ts

`import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CodeInputModule } from 'angular-code-input';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CodeInputModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`

from angular-code-input.

@Nitekurs Just checked and found that this issue is related only to the iOS 12 and below versions.
I have tried to replicate the issue on the iOS 13, and iOS 14, but there are no such issue.
Taking into account that the iOS version is 12, I am not sure that will fix this issue, sorry.
Please let me know if you will faced with this issue on another version of iOS.

from angular-code-input.

@AlexMiniApps Is there any other alternative solutions for this.

from angular-code-input.

@Nitekurs Yep. you can create fork of this or create PR and I will merge it.
The lib is working on iOS 12 and below, but in iOS 12 with tiny UI issues which have described by you.
Why do you need the full support of the iOS12? How many user you will have with this version of iOS?

from angular-code-input.

@AlexMiniApps , I have create fork of this https://stackblitz.com/edit/angular-ivy-sh5bad?file=src%2Fapp%2Fapp.component.html.
Actually this is banking project so I need to support all devices.

Also I have a created simple focus and blur directives in this also pages are jumping in iOS.
https://stackblitz.com/edit/angular-ivy-mbwhpm?file=src/app/directive/autofocus.directive.ts

from angular-code-input.

@Nitekurs Looks nice. I will think about how can I help you.

from angular-code-input.