Hello!
As many others I’m having issues with the keyboard. Everything works fine in the login page but after the user logs in I push a TabsPage and that is where my problems start.
The thing I want to do now is a searchfield. And on input I’m going to call a function. Currently a basic toast to get it going and it works, that’s not the issue. The problem is that everytime I enter a letter the keyboard goes down again and I have to push the input field again. I can’t find anything about this or I’m searching for the wrong things.
I’m importing Keyboard and adding it to provider in app.module.ts.
//Removed unnessesary stuff
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
//Ionic Native
import { Network } from '@ionic-native/network'
import { Keyboard } from '@ionic-native/keyboard'
import { QRScanner } from '@ionic-native/qr-scanner'
//HTTP CLIENT MODULE
import { HttpClientModule } from '@angular/common/http';
//Components
import { CustomHeaderComponent } from '../components/custom-header/custom-header'
//Pages Import
import { MyApp } from './app.component';
//Providers
import { HttpmethodsProvider } from '../providers/httpmethods/httpmethods';
@NgModule({
declarations: [
MyApp
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {
scrollAssist: true,
autoFocusAssist: true,
scrollPadding: false
/* platforms : {
scrollAssist: false,
autoFocusAssist: false
} */
}),
HttpClientModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
HttpmethodsProvider,
Keyboard
]
})
export class AppModule {}
HTML
<!-- Plus sign and search function -->
<ion-item no-lines class='plusSearchBar'>
<button item-start ion-button (click)='addUsers()' clear icon-only color='dark'><ion-icon name='add-circle'></ion-icon></button>
<ion-input clearInput='true' [(ngModel)]='this.searchString' placeholder='Search users...' (input)='searchUsers()'></ion-input>
<button item-end ion-button color='dark' (click)='searchUsers()' clear icon-only><ion-icon name='search'></ion-icon></button>
</ion-item>
Logic
//Will add a user
addUsers(): void {
let toast = this.toast.create({
message: 'Will add user',
duration: 3000,
position: 'middle'
})
toast.present()
}
//Will search a user
searchUsers(): void {
let toast = this.toast.create({
message: this.searchString,
duration: 3000,
position: 'middle'
})
toast.present()
}
Any ideas on how to fix this problem? As you can see I’ve been experimenting with scrollAssist etc.
Ionic info
cli packages: (C:\Users\daniel karlsson\AppData\Roaming\npm\node_modules)
@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
@ionic/app-scripts : 3.1.8
Cordova Platforms : android 7.0.0
Ionic Framework : ionic-angular 3.9.2
System:
Node : v8.11.1
npm : 5.6.0
OS : Windows 10
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : pro