Page jump in iphone on edit. iOS 12

[Nitekurs]

In iOS pages are jump if MPIN change from one input to other.

[Nitekurs]

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

[AlexMiniApps]

@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

[Nitekurs]

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"

`

[AlexMiniApps]

@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

[Nitekurs]

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 { } `

[AlexMiniApps]

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

[Nitekurs]

@AlexMiniApps Is there any other alternative solutions for this.

[AlexMiniApps]

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

[Nitekurs]

@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

[AlexMiniApps]

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