(iOS) Fixed autofocus on auth code input

Don't reset focus from password

src/components/checkboxField.ts

@@ -40,7 +40,7 @@ export default class CheckboxField {
     }
 
     if(options.disabled) {
-      label.classList.add('checkbox-disabled');
+      this.toggleDisability(true);
     }
 
     const input = this.input = document.createElement('input');
@@ -110,6 +110,7 @@ export default class CheckboxField {
     if(options.withRipple) {
       label.classList.add('checkbox-ripple', 'hover-effect');
       ripple(label, undefined, undefined, true);
+      //label.prepend(input);
     } else if(options.withHover) {
       label.classList.add('hover-effect');
     }
@@ -129,4 +130,9 @@ export default class CheckboxField {
   public setValueSilently(checked: boolean) {
     this.input.checked = checked;
   }
+
+  public toggleDisability(disable: boolean) {
+    this.label.classList.toggle('checkbox-disabled', disable);
+    return () => this.toggleDisability(!disable);
+  }
 }

src/pages/pagePassword.ts

@@ -17,7 +17,7 @@ import PasswordMonkey from '../components/monkeys/password';
 import RichTextProcessor from '../lib/richtextprocessor';
 import I18n from '../lib/langPack';
 import LoginPage from './loginPage';
-import { htmlToSpan, replaceContent } from '../helpers/dom';
+import { attachClickEvent, cancelEvent, htmlToSpan, replaceContent, toggleDisability } from '../helpers/dom';
 
 const TEST = false;
 let passwordInput: HTMLInputElement;
@@ -65,17 +65,21 @@ let onFirstMount = (): Promise<any> => {
 
   let state: AccountPassword;
   
-  btnNext.addEventListener('click', function(this, e) {
+  const onSubmit = (e?: Event) => {
+    if(e) {
+      cancelEvent(e);
+    }
+
     if(!passwordInput.value.length) {
       passwordInput.classList.add('error');
       return;
     }
 
-    this.setAttribute('disabled', 'true');
+    const toggle = toggleDisability([passwordInput, btnNext], true);
     let value = passwordInput.value;
 
     btnNextI18n.update({key: 'PleaseWait'});
-    const preloader = putPreloader(this);
+    const preloader = putPreloader(btnNext);
 
     passwordManager.check(value, state).then((response) => {
       //console.log('passwordManager response:', response);
@@ -93,7 +97,7 @@ let onFirstMount = (): Promise<any> => {
           break;
       }
     }).catch((err: any) => {
-      btnNext.removeAttribute('disabled');
+      toggle();
       passwordInputField.input.classList.add('error');
       
       switch(err.type) {
@@ -108,14 +112,16 @@ let onFirstMount = (): Promise<any> => {
   
       getState();
     });
-  });
+  };
+  
+  attachClickEvent(btnNext, onSubmit);
 
   passwordInput.addEventListener('keypress', function(this, e) {
     this.classList.remove('error');
     btnNextI18n.update({key: 'Login.Next'});
 
     if(e.key === 'Enter') {
-      return btnNext.click();
+      return onSubmit();
     }
   });
 

src/pages/pageSignIn.ts

@@ -10,7 +10,7 @@ import Countries, { Country as _Country } from "../countries";
 import appStateManager from "../lib/appManagers/appStateManager";
 import apiManager from "../lib/mtproto/mtprotoworker";
 import { RichTextProcessor } from '../lib/richtextprocessor';
-import { attachClickEvent, cancelEvent, replaceContent } from "../helpers/dom";
+import { attachClickEvent, cancelEvent, replaceContent, toggleDisability } from "../helpers/dom";
 import Page from "./page";
 import InputField from "../components/inputField";
 import CheckboxField from "../components/checkboxField";
@@ -296,7 +296,7 @@ let onFirstMount = () => {
   telEl.addEventListener('keypress', function(this: typeof telEl, e) {
     //console.log('keypress', this.value);
     if(!btnNext.style.visibility &&/* this.value.length >= 9 && */ e.key === 'Enter') {
-      return btnNext.click();
+      return onSubmit();
     } else if(/\D/.test(e.key) && !(e.metaKey || e.ctrlKey) && !(e.key === '+' && e.shiftKey/*  && !this.value */)) {
       e.preventDefault();
       return false;
@@ -317,12 +317,15 @@ let onFirstMount = () => {
   btnNext = Button('btn-primary btn-color-primary', {text: 'Login.Next'});
   btnNext.style.visibility = 'hidden';
 
-  btnNext.addEventListener('click', function(this: HTMLElement, e) {
+  const onSubmit = (e?: Event) => {
-    this.setAttribute('disabled', 'true');
+    if(e) {
+      cancelEvent(e);
+    }
 
-    replaceContent(this, i18n('PleaseWait'));
+    const toggle = toggleDisability([/* telEl, countryInput,  */btnNext, btnQr], true);
-    putPreloader(this);
+
-    //this.innerHTML = 'PLEASE WAIT...';
+    replaceContent(btnNext, i18n('PleaseWait'));
+    putPreloader(btnNext);
 
     //return;
 
@@ -340,22 +343,24 @@ let onFirstMount = () => {
 
       import('./pageAuthCode').then(m => m.default.mount(Object.assign(code, {phone_number: phone_number})));
     }).catch(err => {
-      this.removeAttribute('disabled');
+      toggle();
 
       switch(err.type) {
         case 'PHONE_NUMBER_INVALID':
           telInputField.setError();
           replaceContent(telInputField.label, i18n('Login.PhoneLabelInvalid'));
           telEl.classList.add('error');
-          replaceContent(this, i18n('Login.Next'));
+          replaceContent(btnNext, i18n('Login.Next'));
           break;
         default:
           console.error('auth.sendCode error:', err);
-          this.innerText = err.type;
+          btnNext.innerText = err.type;
           break;
       }
     });
-  });
+  };
+
+  attachClickEvent(btnNext, onSubmit);
 
   const btnQr = Button('btn-primary btn-secondary btn-primary-transparent primary', {text: 'Login.QR.Login'});
 

src/pages/pageSignUp.ts

@@ -11,7 +11,7 @@ import Button from '../components/button';
 import InputField from '../components/inputField';
 import { putPreloader } from '../components/misc';
 import PopupAvatar from '../components/popups/avatar';
-import { replaceContent } from '../helpers/dom';
+import { blurActiveElement, replaceContent } from '../helpers/dom';
 import appStateManager from '../lib/appManagers/appStateManager';
 import I18n, { i18n } from '../lib/langPack';
 //import apiManager from '../lib/mtproto/apiManager';
@@ -158,6 +158,11 @@ const onFirstMount = () => import('../lib/appManagers/appProfileManager').then(i
       }
     });
   });
+
+  blurActiveElement();
+  return new Promise((resolve) => {
+    window.requestAnimationFrame(resolve);
+  });
 });
 
 const page = new Page('page-signUp', true, onFirstMount, (_authCode: typeof authCode) => {

src/scss/partials/_checkbox.scss

@@ -262,9 +262,9 @@
     }
   }
   
-  &:checked + .checkbox-box {
+  /* &:checked + .checkbox-box {
     
-  }
+  } */
 
   &:disabled + .checkbox-box, &:disabled ~ .checkbox-caption {
     cursor: default;

src/scss/partials/_input.scss

@@ -122,10 +122,10 @@
       //padding: 0 calc(1rem - 1px);
     }
     
-    &:disabled {
+    /* &:disabled {
       background-color: #fff;
       color: #000;
-    }
+    } */
     
     &.error {
       border-color: var(--danger-color);