fix: make keyboard dismissable on mobile devices

src/app/modules/dashboard/sections/search-section/search-section.component.html

@@ -20,9 +20,11 @@
   <div class="searchbar">
     <ion-input
       type="search"
+      enterkeyhint="search"
       placeholder="{{ 'search.search_bar.placeholder' | translate }}"
       (submit)="onSubmitSearch()"
       (keyup.enter)="onSubmitSearch()"
+      (search)="onSubmitSearch()"
       [(ngModel)]="searchTerm"
     ></ion-input>
     <ion-icon

src/app/modules/dashboard/sections/search-section/search-section.component.scss

@@ -22,10 +22,8 @@
     border-radius: var(--border-radius-default);
     --padding-start: var(--spacing-md);
     --padding-end: var(--spacing-md);
-    --padding-top: var(--spacing-xl);
-    --padding-bottom: var(--spacing-xl);
-    font-size: var(--font-size-xs);
-    --placeholder-font-weight: var(--font-weight-bold);
+    --padding-top: var(--spacing-md);
+    --padding-bottom: var(--spacing-md);
     box-shadow: var(--shadow-default);
   }
   ion-icon {

src/app/modules/dashboard/sections/search-section/search-section.component.ts

@@ -14,6 +14,8 @@
  */
 import {Component} from '@angular/core';
 import {Router} from '@angular/router';
+import {Capacitor} from '@capacitor/core';
+import {Keyboard} from '@capacitor/keyboard';
 
 /**
  * Shows a search input field
@@ -32,6 +34,17 @@ export class SearchSectionComponent {
    * User submits search
    */
   onSubmitSearch() {
-    this.router.navigate(['/search', this.searchTerm]);
+    this.router
+      .navigate(['/search', this.searchTerm])
+      .then(() => this.hideKeyboard());
+  }
+
+  /**
+   * Hides keyboard in native app environments
+   */
+  hideKeyboard() {
+    if (Capacitor.isNativePlatform()) {
+      Keyboard.hide();
+    }
   }
 }