refactor: make keyboard dismissable on search bars

This commit is contained in:
Rainer Killinger
2022-05-27 11:56:36 +02:00
parent 9d31365d0a
commit 786abdbefa
5 changed files with 27 additions and 2 deletions

View File

@@ -14,6 +14,7 @@
*/ */
import {Component, Input, OnInit, OnDestroy} from '@angular/core'; import {Component, Input, OnInit, OnDestroy} from '@angular/core';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
import {Keyboard} from '@capacitor/keyboard';
import {AlertController} from '@ionic/angular'; import {AlertController} from '@ionic/angular';
import { import {
SCFacet, SCFacet,
@@ -214,6 +215,13 @@ export class SearchPageComponent implements OnInit, OnDestroy {
} }
} }
/**
* Hides keyboard in native app environments
*/
hideKeyboard() {
Keyboard.hide();
}
/** /**
* Set starting values (e.g. forced filter, which can be set in components inheriting this one) * Set starting values (e.g. forced filter, which can be set in components inheriting this one)
*/ */

View File

@@ -12,9 +12,12 @@
</ion-buttons> </ion-buttons>
<ion-searchbar <ion-searchbar
(ngModelChange)="searchStringChanged($event)" (ngModelChange)="searchStringChanged($event)"
(keyup.enter)="hideKeyboard()"
[(ngModel)]="queryText" [(ngModel)]="queryText"
showClearButton="always"
placeholder="{{ 'search.search_bar.placeholder' | translate }}" placeholder="{{ 'search.search_bar.placeholder' | translate }}"
showClearButton="always"
type="search"
enterkeyhint="search"
> >
</ion-searchbar> </ion-searchbar>
</ion-toolbar> </ion-toolbar>

View File

@@ -12,9 +12,12 @@
</ion-buttons> </ion-buttons>
<ion-searchbar <ion-searchbar
(ngModelChange)="searchStringChanged($event)" (ngModelChange)="searchStringChanged($event)"
(keyup.enter)="hideKeyboard()"
[(ngModel)]="queryText" [(ngModel)]="queryText"
showClearButton="always"
placeholder="{{ 'hebisSearch.search_bar.placeholder' | translate }}" placeholder="{{ 'hebisSearch.search_bar.placeholder' | translate }}"
showClearButton="always"
type="search"
enterkeyhint="search"
> >
</ion-searchbar> </ion-searchbar>
</ion-toolbar> </ion-toolbar>

View File

@@ -20,6 +20,7 @@ import {
ViewChild, ViewChild,
} from '@angular/core'; } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {Keyboard} from '@capacitor/keyboard';
import { import {
AlertController, AlertController,
IonRouterOutlet, IonRouterOutlet,
@@ -276,6 +277,13 @@ export class MapPageComponent {
} }
} }
/**
* Hides keyboard in native app environments
*/
hideKeyboard() {
Keyboard.hide();
}
/** /**
* Subscribe to needed observables and get the location status when user is entering the page * Subscribe to needed observables and get the location status when user is entering the page
*/ */

View File

@@ -27,10 +27,13 @@
</ion-buttons> </ion-buttons>
<ion-searchbar <ion-searchbar
(keyup)="searchKeyUp($event)" (keyup)="searchKeyUp($event)"
(keyup.enter)="hideKeyboard()"
[(ngModel)]="queryText" [(ngModel)]="queryText"
(ionClear)="searchStringChanged()" (ionClear)="searchStringChanged()"
placeholder="{{ 'map.page.search_bar.placeholder' | translate }}" placeholder="{{ 'map.page.search_bar.placeholder' | translate }}"
showClearButton="always" showClearButton="always"
type="search"
enterkeyhint="search"
> >
</ion-searchbar> </ion-searchbar>
<ion-buttons slot="end"> <ion-buttons slot="end">