fix: autofocus searchbar only when no default data is displayed

This commit is contained in:
2023-03-23 11:35:53 +01:00
committed by Rainer Killinger
parent 05e996ae90
commit e90286fc68
2 changed files with 6 additions and 6 deletions

View File

@@ -33,7 +33,7 @@
type="search" type="search"
enterkeyhint="search" enterkeyhint="search"
class="filterable" class="filterable"
autofocus [autofocus]="!showDefaultData"
> >
<ion-menu-button menu="context" auto-hide="false"> <ion-menu-button menu="context" auto-hide="false">
<ion-icon name="tune"></ion-icon> <ion-icon name="tune"></ion-icon>

View File

@@ -13,24 +13,24 @@
* this program. If not, see <https://www.gnu.org/licenses/>. * this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import {AfterViewInit, Directive, ElementRef} from '@angular/core'; import {AfterViewInit, Directive, ElementRef, Input} from '@angular/core';
import {IonSearchbar} from '@ionic/angular'; import {IonSearchbar} from '@ionic/angular';
@Directive({ @Directive({
selector: 'ion-searchbar[autofocus]', selector: 'ion-searchbar[autofocus]',
}) })
export class SearchbarAutofocusDirective implements AfterViewInit { export class SearchbarAutofocusDirective implements AfterViewInit {
@Input() autofocus = true;
constructor(private element: ElementRef) {} constructor(private element: ElementRef) {}
ngAfterViewInit() { ngAfterViewInit() {
const label = `focus`; if (!this.autofocus) return;
console.time(label);
const interval = setInterval(() => { const interval = setInterval(() => {
const searchbar = this.element.nativeElement as IonSearchbar; const searchbar = this.element.nativeElement as IonSearchbar;
searchbar.setFocus(); void searchbar.setFocus();
}); });
const onFocus = () => { const onFocus = () => {
console.timeEnd(label);
clearInterval(interval); clearInterval(interval);
this.element.nativeElement.removeEventListener('ionFocus', onFocus); this.element.nativeElement.removeEventListener('ionFocus', onFocus);
}; };