Ion-select - interface=popover not working, opens as alert


#1

Can anyone help me with this?

I have added to my ion-select the interface like this.

<ion-select interface="popover" /*some other code*/> ...</ion-select>

but it still opens as an alert.

I’ve seen that you need Ionic 3.1.0, but I just looked over it and I got the newest dependencies.

Output from the command ionic info:
image

My dependencies in package.json:
image

I would appreciate it so much, if someone is able to help me.


#2

push.
does anyone have the solution or same problems`


#3

Did you get solution for this? i am also facing same issue! I am using ionic 4


#4

yeah. it’s only working for selecting a single option.
not working with multiple=‘true’


#5

Please do report to github/ionicv3


#6

nope. it’s even mentioned in the api docs


#7

I have used below code but everytime it shows an alert NOT popover! what mistake i am doing?

<ion-select interface="popover"  multiple="false" placeholder="Select One"  (ionChange)="onLanguageChange($event)" #mySelect>
    <ion-select-option value="en" [selected]="setLang == 'en'" >English - {{setLang}}</ion-select-option> 
    <ion-select-option value="pt" [selected]="setLang == 'pt'">Português - {{setLang}}</ion-select-option> 
</ion-select>

#8

pls try it with ‘ion-option’ instead of ‘ion-select’ and leave the multiple out.
like this:

<ion-select interface="popover" placeholder="Select One"  (ionChange)="onLanguageChange($event)" #mySelect>
    <ion-option value="en" [selected]="setLang == 'en'" >English - {{setLang}}</ion-option> 
    <ion-option value="pt" [selected]="setLang == 'pt'">Português - {{setLang}}</ion-option> 
</ion-select>

between you probably don’t even need to declare the selected directly. it should be handled as soon as setLang is set as [(ngModel)] on ion-select directly.


#9

Hi Philipp_Websteps:
I tried what you suggested, but it does not work. My screen even do not open it. Its compile time error. Please see the screen below:


#10

which version of ionic are you using? pls send your package.json
I’m refering to ionic v3


#11

package.json

{
  "name": "weightTraining",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "@ionic-native/app-rate": "^5.0.0-beta.22",
    "@ionic-native/core": "5.0.0-beta.21",
    "@ionic-native/file": "^4.18.0",
    "@ionic-native/native-storage": "^5.0.0-beta.22",
    "@ionic-native/network": "^5.0.0-beta.22",
    "@ionic-native/social-sharing": "^5.0.0-beta.22",
    "@ionic-native/spinner-dialog": "^5.0.0-beta.22",
    "@ionic-native/splash-screen": "5.0.0-beta.21",
    "@ionic-native/status-bar": "5.0.0-beta.21",
    "@ionic-native/text-to-speech": "^5.0.0-beta.22",
    "@ionic/angular": "4.0.0-beta.16",
    "@ionic/pro": "2.0.3",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "cordova-android": "7.1.4",
    "cordova-plugin-apprate": "1.4.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-dialogs": "^2.0.1",
    "cordova-plugin-file": "6.0.1",
    "cordova-plugin-globalization": "^1.11.0",
    "cordova-plugin-inappbrowser": "^3.0.0",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.3.1",
    "cordova-plugin-native-spinner": "1.1.3",
    "cordova-plugin-nativestorage": "^2.3.2",
    "cordova-plugin-nuance-speechkit": "2.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-tts": "0.2.3",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-socialsharing": "5.4.3",
    "core-js": "^2.6.1",
    "es6-promise-plugin": "4.2.2",
    "ionic-cache": "^3.1.3",
    "ionic-cache-observable": "0.0.6",
    "ng2-translate": "^5.0.0",
    "rxjs": "~6.3.3",
    "rxjs-compat": "^6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.10.0",
    "@angular-devkit/build-angular": "^0.11.4",
    "@angular-devkit/core": "~7.0.0",
    "@angular-devkit/schematics": "~7.0.0",
    "@angular/cli": "^7.1.4",
    "@angular/compiler": "~7.0.0",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@ionic/angular-toolkit": "^1.2.2",
    "@types/jasmine": "^2.8.14",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^10.12.18",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.4.2",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-apprate": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-x-socialsharing": {
        "ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
      },
      "cordova-plugin-native-spinner": {},
      "cordova-plugin-tts": {},
      "cordova-plugin-file": {}
    },
    "platforms": [
      "android"
    ]
  }
}

I am using
CLI 4.6.0
npm 6.4.1
Angular 6


#12

you are using ionic-4. I can’t help you with this one


#13

Who can help me, anybody please reply if you any answer