diff --git a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html index 933227f81..9dd4e70f0 100644 --- a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html +++ b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html @@ -58,7 +58,7 @@ {{ 'addon.mod_lesson.enterpassword' | translate }} + core-auto-focus #passwordinput [clearOnEdit]="false"> diff --git a/src/addons/mod/lesson/components/password-modal/password-modal.html b/src/addons/mod/lesson/components/password-modal/password-modal.html index 13d6c63c6..4996d156f 100644 --- a/src/addons/mod/lesson/components/password-modal/password-modal.html +++ b/src/addons/mod/lesson/components/password-modal/password-modal.html @@ -15,7 +15,7 @@ {{ 'addon.mod_lesson.enterpassword' | translate }} + core-auto-focus #passwordinput [clearOnEdit]="false"> diff --git a/src/core/components/local-file/core-local-file.html b/src/core/components/local-file/core-local-file.html index 0c8339af2..1fb756998 100644 --- a/src/core/components/local-file/core-local-file.html +++ b/src/core/components/local-file/core-local-file.html @@ -14,7 +14,7 @@ + (click)="$event.stopPropagation()" core-auto-focus [(ngModel)]="newFileName" *ngIf="editMode">
diff --git a/src/core/components/send-message-form/core-send-message-form.html b/src/core/components/send-message-form/core-send-message-form.html index af2617248..066072909 100644 --- a/src/core/components/send-message-form/core-send-message-form.html +++ b/src/core/components/send-message-form/core-send-message-form.html @@ -1,5 +1,5 @@
- + * The value of the input will decide if show keyboard when focusing the element (only on Android). + * In case value is nofocus, the directive is disabled. * - * @deprecated since 3.9.5. ion-input now supports an [autofocus] attribute, please use that one instead. + * */ @Directive({ selector: '[core-auto-focus]', }) -export class CoreAutoFocusDirective implements OnInit { +export class CoreAutoFocusDirective implements AfterViewInit { - @Input('core-auto-focus') coreAutoFocus: boolean | string = true; + @Input('core-auto-focus') showKeyboard: boolean | string = true; protected element: HTMLElement; @@ -38,31 +39,54 @@ export class CoreAutoFocusDirective implements OnInit { } /** - * Component being initialized. + * @inheritdoc */ - ngOnInit(): void { - this.autoFocus(); + ngAfterViewInit(): void { + if (this.showKeyboard === 'nofocus') { + return; + } + + this.setFocus(); } /** - * Function after the view is initialized. + * Function to focus the element. + * + * @param retries Internal param to stop retrying then 0. */ - protected autoFocus(): void { - const autoFocus = CoreUtils.isTrueOrOne(this.coreAutoFocus); - if (autoFocus) { - // Wait a bit to make sure the view is loaded. - setTimeout(() => { - // If it's a ion-input or ion-textarea, search the right input to use. - let element = this.element; - if (this.element.tagName == 'ION-INPUT') { - element = this.element.querySelector('input') || element; - } else if (this.element.tagName == 'ION-TEXTAREA') { - element = this.element.querySelector('textarea') || element; - } - - CoreDomUtils.focusElement(element); - }, 200); + protected setFocus(retries = 10): void { + if (retries == 0) { + return; } + + // Wait a bit to make sure the view is loaded. + setTimeout(() => { + // If it's a ion-input or ion-textarea, search the right input to use. + let element: HTMLElement | null = null; + + if (this.element.tagName == 'ION-INPUT') { + element = this.element.querySelector('input'); + } else if (this.element.tagName == 'ION-TEXTAREA') { + element = this.element.querySelector('textarea'); + } else { + element = this.element; + } + + if (!element) { + this.setFocus(retries - 1); + + return; + } + + const showKeyboard = this.showKeyboard === '' || CoreUtils.isTrueOrOne(this.showKeyboard); + CoreDomUtils.focusElement(element, showKeyboard); + + if (element != document.activeElement) { + this.setFocus(retries - 1); + + return; + } + }, 200); } } diff --git a/src/core/features/courses/components/self-enrol-password/self-enrol-password.html b/src/core/features/courses/components/self-enrol-password/self-enrol-password.html index 5de62417d..b1c6c8b3b 100644 --- a/src/core/features/courses/components/self-enrol-password/self-enrol-password.html +++ b/src/core/features/courses/components/self-enrol-password/self-enrol-password.html @@ -20,7 +20,7 @@ type="password" placeholder="{{ 'core.courses.password' | translate }}" [(ngModel)]="password" - [autofocus]="true" + core-auto-focus [clearOnEdit]="false"> diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html index 5e1e67ff1..18ed8045b 100644 --- a/src/core/features/login/pages/credentials/credentials.html +++ b/src/core/features/login/pages/credentials/credentials.html @@ -34,7 +34,7 @@ + required="true" core-auto-focus> diff --git a/src/core/features/login/pages/forgotten-password/forgotten-password.html b/src/core/features/login/pages/forgotten-password/forgotten-password.html index 615048cae..b7ddc1d03 100644 --- a/src/core/features/login/pages/forgotten-password/forgotten-password.html +++ b/src/core/features/login/pages/forgotten-password/forgotten-password.html @@ -31,7 +31,7 @@ + formControlName="value" autocapitalize="none" autocorrect="off" [core-auto-focus]="showKeyboard"> diff --git a/src/core/features/login/pages/forgotten-password/forgotten-password.ts b/src/core/features/login/pages/forgotten-password/forgotten-password.ts index e6aa8a6b0..5e54a3ce6 100644 --- a/src/core/features/login/pages/forgotten-password/forgotten-password.ts +++ b/src/core/features/login/pages/forgotten-password/forgotten-password.ts @@ -35,7 +35,7 @@ export class CoreLoginForgottenPasswordPage implements OnInit { myForm!: FormGroup; siteUrl!: string; - autoFocus!: boolean; + showKeyboard!: boolean; constructor( protected formBuilder: FormBuilder, @@ -55,7 +55,7 @@ export class CoreLoginForgottenPasswordPage implements OnInit { } this.siteUrl = siteUrl; - this.autoFocus = Platform.is('tablet'); + this.showKeyboard = Platform.is('tablet'); this.myForm = this.formBuilder.group({ field: ['username', Validators.required], value: [CoreNavigator.getRouteParam('username') || '', Validators.required], diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html index 3f2b93aa7..c2da9867a 100644 --- a/src/core/features/login/pages/reconnect/reconnect.html +++ b/src/core/features/login/pages/reconnect/reconnect.html @@ -42,7 +42,7 @@ + autocomplete="current-password" enterkeyhint="go" required="true" core-auto-focus> diff --git a/src/core/features/login/pages/site/site.html b/src/core/features/login/pages/site/site.html index 0d45b3ec5..2707d506e 100644 --- a/src/core/features/login/pages/site/site.html +++ b/src/core/features/login/pages/site/site.html @@ -27,7 +27,7 @@

{{ 'core.login.siteaddress' | translate }}

+ formControlName="siteUrl" [core-auto-focus]="showKeyboard"> @@ -37,7 +37,7 @@

{{ 'core.login.siteaddress' | translate }}

+ [core-auto-focus]="showKeyboard" (ionChange)="searchSite($event, siteForm.value.siteUrl)"> diff --git a/src/core/features/search/components/search-box/core-search-box.html b/src/core/features/search/components/search-box/core-search-box.html index 8cc8753b9..8438c6237 100644 --- a/src/core/features/search/components/search-box/core-search-box.html +++ b/src/core/features/search/components/search-box/core-search-box.html @@ -3,7 +3,7 @@