Ion-input & ion-select not responding in iOS

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


		<ion-title>Edit filter</ion-title>
		<ion-buttons end>
			<button ion-button icon-only (click)="closeModal()">
				<ion-icon item-right name="close"></ion-icon>
<ion-content padding>
	<div class="filter-builder-component">
		<ion-list *ngIf="_sourceDataLoaded">
				<ion-label floating>Filter name</ion-label>
				<ion-input type="text" [(ngModel)]="" class="filter-name"></ion-input>
				<ion-label floating>Search text</ion-label>
				<ion-input type="text" [(ngModel)]="_filter.textSearch"></ion-input>

				<ion-select [(ngModel)]="_filter.status" multiple="true">
					<ion-option *ngFor="let item of _sourceData.status" [value]="item">{{item}}</ion-option>
				<ion-select [(ngModel)]="_filter.rating" multiple="true">
					<ion-option *ngFor="let item of _sourceData.rating" [value]="item">{{item}}</ion-option>
				<ion-select [(ngModel)]="_filter.inspector" multiple="true">
					<ion-option *ngFor="let item of _sourceData.inspector" [value]="item.userId">{{item.realName}}</ion-option>
				<ion-select [(ngModel)]="_filter.module" multiple="true">
					<ion-option *ngFor="let item of _sourceData.module" [value]="item.moduleId">{{}}</ion-option>
				<ion-select [(ngModel)]="_filter.className" multiple="true">
					<ion-option *ngFor="let item of _sourceData.class" [value]="item">{{item}}</ion-option>


			<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>


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';

  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(, LogService.LogLevel.BULK );

        this._filter = params.get("filter") || new InspectionFilter();
        this._sourceDataLoaded = false;

        this._sourceData = {
            status: [],
            rating: [],
            inspector: [],
            module: [],
            class: []



	//private ngAfterViewInit() {}
	public loadSourceData() {
            result => {
                this._sourceData = result;

                this._sourceData.class = [];
                for( let module of this._sourceData.module){

                    for( let classDef of module.definition ){
                        this._sourceData.class.push( );
                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 );

    public reset() {

    public delete() {
        this._inspectionFitlerSvc.removeFilter( this._filter);

    public closeModal() {


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 });


Can someone at least confirm that the current version of ion-input etc is working on iOS so that I know it’s something I’m doing wrong?

It definitely was about a week ago.

1 Like

OK, so it works fine, unless it’s in a modal.

So now I’m investigating why a modal would stop ion-input from working.

Well that was an exercise in debugging…

It turned out that if you launch a modal from a popover, iOS doesn’t let you interact with any elements on the modal. I refactored to close the popover and launch the modal from the main page, and all works as required now.