Ionic select not select the already selected option

Ionic Framework Ionic Angular
1

I have the following piece of code of ion-select

                <ion-select
					placeholder="Select Device"
					interface="popover"
					[compareWith]="compareFn"
					(ionChange)="selectedDevice($event)"
				>
					<ion-select-option value="0" selected>All</ion-select-option>
					<ion-select-option
						*ngFor="let device of Devices"
						value="{{device.id}}"
					>
						{{device.name}}
					</ion-select-option>
				</ion-select>

And the compare function as follows;

compareFn(e1, e2): boolean {
		return e1 && e2 ? e1.deviceId == e2.deviceId : e1 == e2;
	}

Now, this selection is in my home page, once I select a device selectedDevice will execute fine and goes to the details page.

Now when I click the back button and comes to the home page, I can see that all devices are shown, and when I try to select the last pre-selected option, I am not able to execute the selectedDevice function?

But if I change my option to another one, then the function executes perfectly.

What am I doing wrong?

Please help me.

2

My initial reaction is “asking the select component to do something it wasn’t designed to do”. Since it’s intended for choosing something from a list, there wouldn’t be much point in firing a change event without a change.

I would suggest simply making your own component using <ion-list> and <ion-item> and opening it in a popover, leaving <ion-select> totally out of the picture.