Ion-select not working inside of ion-menu

Hi,

If I use this part of code in any view it works just fine:

<ion-item>
          <ion-label stacked>Gender</ion-label>
          <ion-select>
            <ion-option value="MALE">Male</ion-option>
            <ion-option value="FEMALE">Female</ion-option>
          </ion-select>
        </ion-item>

But if I use the same code as part of side menu on item click I am getting error Cannot read property 'present' of null, here is complete log:

EXCEPTION: Error during evaluation of "click"
EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: Cannot read property 'present' of null
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'present' of null
    at Select._open (app.bundle.js:58000)
    at Select._click (app.bundle.js:57947)
    at AbstractChangeDetector.ChangeDetector_MyApp_0.handleEventInternal (viewFactory_MyApp:736)
    at AbstractChangeDetector.handleEvent (app.bundle.js:14216)
    at AppView.triggerEventHandlers (app.bundle.js:18523)
    at eval (viewFactory_MyApp:1632)
    at app.bundle.js:33665
    at app.bundle.js:33042
    at Zone.run (app.bundle.js:2258)
    at Zone.run (app.bundle.js:17767)
ERROR CONTEXT:
EventEvaluationErrorContext {element: ion-select, componentElement: ion-app, context: MyApp, locals: Object, injector: Injector}
Uncaught EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: Cannot read property 'present' of null
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'present' of null
    at Select._open (http://localhost:8100/build/js/app.bundle.js:58000:19)
    at Select._click (http://localhost:8100/build/js/app.bundle.js:57947:15)
    at AbstractChangeDetector.ChangeDetector_MyApp_0.handleEventInternal (viewFactory_MyApp:736:35)
    at AbstractChangeDetector.handleEvent (http://localhost:8100/build/js/app.bundle.js:14216:30)
    at AppView.triggerEventHandlers (http://localhost:8100/build/js/app.bundle.js:18523:37)
    at eval (viewFactory_MyApp:1632:98)
    at http://localhost:8100/build/js/app.bundle.js:33665:37
    at http://localhost:8100/build/js/app.bundle.js:33042:87
    at Zone.run (http://localhost:8100/build/js/app.bundle.js:2258:25)
    at Zone.run (http://localhost:8100/build/js/app.bundle.js:17767:43)
ERROR CONTEXT:
[object Object]

Anybody else have similar issue? Any solution? Thanks

Hmm, this could probably be because the sidemenu isn’t technically part of a page. The select component builds off the alert component, which needs NavController. And if you’re using this in the sidemenu starter, in app.ts, there’s not page/nav-controller context.

What you can do though is just move the sidemenu inside a @Page, and keep the @App a basic ion-nav.

You are right, my side menu is under @App I already tried to move it under @Page but did not worked for some reason. I will try again.

Thanks

Hi @mhartington

I tried to move side menu under @Page but is is not working as expected.

Here is what I am trying to do, I have left side menu which is used to browse through screens, the same thing as in sidemenu starter app. When you open one specific screen I want to have right side menu for defining search parameters. So, right side menu is just for that screen.

In my app.html I had left side menu, right side meny and:
<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

If I move right side menu from app.html to some other page html, my right side menu:
<ion-menu side="right" [content]="content" id="right-side-menu-nearby">
is not opening, it is like content is not accessible for visible.

If I create some ID in same file with right side menu and set content to that ID then it opens but is not working as expected, it is not closing, left side menu is overlapping, etc, etc…

Do you have some suggestions how to solve this issue?

Thank you

Hi @mhartington,

I think only issue here is that on right side menu show under @Page CSS class show-backdrop is not added to backdrop. Other than that I think I figured this out :slight_smile:

Hi @sava999,
I’m facing the exact same problem. Have you found a solution so ion-select can work in a menu ? I tried to put my menu under @Page but couldn’t find a way to make it work and ion-select doesn’t work under @App.

Thanks

Hi,

it is working fine for me under @Page. So, I guess, you are doing something wrong :slight_smile:

Best,
Boris

Hi @sava999, can you share the code how you implemented as @Page ? I’m still in learning angular 2 / ionic 2 at this moment, but need help on this. Thanks.

Hi @sava999,

i have the same problem with ion-select in item-menu. Please, can you share the code how you implemented side-menu as @Page.

Thanks

Hi,

Well I don’t have much code to show, basically I just moved <ion-menu> under @Page HTML file instead of @App HTML file.

I have one screen with two tabs, please notice here ID mycontent:

<ion-tabs primary tabbarPlacement="top" #mycontent> <ion-tab [root]="nearby_tab" tabTitle="Nearby"></ion-tab> <ion-tab [root]="search_tab" tabTitle="Search"></ion-tab> </ion-tabs>

And in that same HTML file I have <ion-menu> that is opening from right side. Here I have content set to above ID:

<ion-menu side="right" [content]="mycontent" id="right-side-menu-nearby">
  <ion-toolbar>
    <ion-title>Nearby Filter</ion-title>
  </ion-toolbar>

  <ion-content>
    <form [ngFormModel]="nearby_search" (submit)="nearbySearch($event)">
      <ion-list>
        <ion-item>
          <ion-label>Gender</ion-label>

          <ion-select ngControl="gender" multiple="true">
            <ion-option value="MALE">Male</ion-option>
            <ion-option value="FEMALE">Female</ion-option>
          </ion-select>
        </ion-item>
      </ion-list>
    </form>
  </ion-content>
</ion-menu>

Then you need to have somewhere button that is opening this menu, notice here menu ID:

<button menuToggle="right-side-menu-nearby" end>
    <ion-icon name="funnel"></ion-icon>
</button>

That should be it.

@mhartington - something is very wrong with ion-select component.

It doesn’t work even in official doc section (selected items aren’t checked at all):

http://ionicframework.com/docs/v2/api/components/select/Select/

I have strange issue that I can’t close ion-select dialog. Button action works fine but it is not closing :frowning:

Vukasine brate nemoj da se sekiras, popravice oni to :laughing:

I’m running into the same problem. It would be nice if it would just work in the sidemenu and we didn’t have to hack our way around it…

1 Like

Hi!
How can i move my sidemenu into a @Page? As i know i have to place the ion-menu in the same document as ion-nav, because of the ion-menu’s [content] attribute (i have to reference to the ion-nav’s ID from the ion-menu, how can i do that, if i move the ion-menu into a @Page?)

Thanks!

My main component (the one that does the bootstrapping) just references a page. The application acts just the same. Here’s an example of my top level component:

@Component({
template: ‘<ion-nav [root]=“rootPage”>’
})
export class MyApp {

private rootPage: any;

constructor(private platform: Platform) {
this.rootPage = RootPage;

  platform.ready().then(() => {
  	// Okay, so the platform is ready and our plugins are available.
  	// Here you can do any higher level native things you might need.
  	StatusBar.styleDefault();
  });

}
}

ionicBootstrap(MyApp, […]);

Then my rootPage contains the menu and is the place where my subpages get loaded into:

<ion-menu [content]="content" class="root-sidemenu">
	<ion-content>
		...
	</ion-content>
</ion-menu>

<ion-nav [root]="currentPage" #content></ion-nav>

Hi! Thanks for your response!

Can you provide a working example please, i’m a little bit confused about your rootPage and currentPage variables.

My thoughts: You create a rootPage variable for the MyApp, but then you havent used that variable (i think because you have to use it in the ion-nav [root] directive, but your template is empty, so you dont have any ion-nav), then in the RootPage you use the currentPage variable for the ion-nav [root] directive, which is an unknown variable for me.
Anyway, i tried it, but its not working :frowning:

Thanks!