Hi all,
I’ve got an odd situation where I’m creating a modal, but the input elements don’t work on an iOS device. I can see the elements, but tapping on them does nothing.
All is fine in Chrome and Android.
I have attached my html and ts here, along with the modal launching function for your review. Any assistance would be greatly appreciated. I don’t know where to do from here, short of using plain html form elements, and forget the ion-xxx elements all together.
Ta, Lance
filterBuilder.html
<ion-header>
<ion-navbar>
<ion-title>Edit filter</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="closeModal()">
<ion-icon item-right name="close"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<div class="filter-builder-component">
<ion-list *ngIf="_sourceDataLoaded">
<ion-list-header>
<ion-label floating>Filter name</ion-label>
<ion-input type="text" [(ngModel)]="_filter.name" class="filter-name"></ion-input>
</ion-list-header>
<ion-item>
<ion-label floating>Search text</ion-label>
<ion-input type="text" [(ngModel)]="_filter.textSearch"></ion-input>
</ion-item>
<ion-item>
<ion-label>Status</ion-label>
<ion-select [(ngModel)]="_filter.status" multiple="true">
<ion-option *ngFor="let item of _sourceData.status" [value]="item">{{item}}</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Rating</ion-label>
<ion-select [(ngModel)]="_filter.rating" multiple="true">
<ion-option *ngFor="let item of _sourceData.rating" [value]="item">{{item}}</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Inspector</ion-label>
<ion-select [(ngModel)]="_filter.inspector" multiple="true">
<ion-option *ngFor="let item of _sourceData.inspector" [value]="item.userId">{{item.realName}}</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Module</ion-label>
<ion-select [(ngModel)]="_filter.module" multiple="true">
<ion-option *ngFor="let item of _sourceData.module" [value]="item.moduleId">{{item.name}}</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Class</ion-label>
<ion-select [(ngModel)]="_filter.className" multiple="true">
<ion-option *ngFor="let item of _sourceData.class" [value]="item">{{item}}</ion-option>
</ion-select>
</ion-item>
</ion-list>
<ion-row>
<ion-col><button ion-button (tap)="save()">Save</button></ion-col>
<ion-col><button ion-button (tap)="reset()">Reset</button></ion-col>
<ion-col><button ion-button (tap)="delete()">Delete</button></ion-col>
</ion-row>
</div>
</ion-content>
filterBuilder.ts
import { Component } from '@angular/core';
import { LogService } from '../../providers/log.service';
import { InspectionFilterService } from '../../providers/inspectionFilter.service';
import { NavParams, ViewController } from 'ionic-angular';
import { InspectionFilter } from '../../models/inspectionFilter';
@Component({
selector: 'filter-builder-component',
templateUrl: 'filterBuilder.html'
})
export class FilterBuilderComponent {
private _logger: LogService;
private _filter: InspectionFilter;
private _sourceData: InspectionFilter.ISourceData;
protected _sourceDataLoaded: boolean;
constructor( params: NavParams, private _viewCtrl: ViewController, private _inspectionFitlerSvc: InspectionFilterService ) {
this._logger = new LogService( FilterBuilderComponent.name, LogService.LogLevel.BULK );
this._logger.debug("loaded");
this._filter = params.get("filter") || new InspectionFilter();
this._sourceDataLoaded = false;
this._sourceData = {
status: [],
rating: [],
inspector: [],
module: [],
class: []
};
this.loadSourceData();
}
//private ngAfterViewInit() {}
public loadSourceData() {
this._inspectionFitlerSvc.getSourceData().subscribe(
result => {
this._sourceData = result;
this._sourceData.class = [];
for( let module of this._sourceData.module){
for( let classDef of module.definition ){
this._sourceData.class.push( classDef.name );
}
}
this._sourceDataLoaded = true;
},
error => this._logger.error( `Could not get filter source data: ${error}`)
)
}
public getFilter( name: string ): InspectionFilter {
return new InspectionFilter();
}
public save() {
this._inspectionFitlerSvc.saveFilter( this._filter );
this._viewCtrl.dismiss();
}
public reset() {
this._filter.initFilter();
}
public delete() {
this._inspectionFitlerSvc.removeFilter( this._filter);
this._viewCtrl.dismiss();
}
public closeModal() {
this._viewCtrl.dismiss();
}
}
And finally, the modal is being instantiated by calling the following function in the parent component…
protected editFilter(filter?: InspectionFilter) {
filter = filter || new InspectionFilter();
let profileModal = this._modalCtrl.create( FilterBuilderComponent, { filter: filter });
profileModal.present();
}