search

AlexMiniApps / angular-code-input

Code (number/chars/otp/password) input component for angular 7, 8, 9, 10, 11, 12+ projects including Ionic 4, 5 +
MIT License
180 stars 50 forks source link

Page jump in iphone on edit. iOS 12 #43

Open Nitekurs opened 3 years ago

Nitekurs commented 3 years ago

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

Nitekurs commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago
  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 commented 3 years ago

@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 commented 3 years ago

@AlexMiniApps Is there any other alternative solutions for this.

AlexMiniApps commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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