Ion-input & ion-select not responding in iOS


#1

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

#2

Anyone?

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?


#3

It definitely was about a week ago.


#4

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.


#5

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.