Ion-select not working inside of ion-menu

sava999 · April 6, 2016, 11:45am

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

mhartington · April 6, 2016, 5:17pm

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.

sava999 · April 6, 2016, 5:59pm

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

sava999 · April 7, 2016, 11:19am

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

sava999 · April 7, 2016, 12:07pm

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

DevLR · April 21, 2016, 2:02pm

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

sava999 · April 21, 2016, 6:47pm

Hi,

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

Best,
Boris

ozexpert · April 26, 2016, 4:30pm

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.

flowerpower · April 29, 2016, 9:55am

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

sava999 · April 29, 2016, 10:49am

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.

Vukasin · April 30, 2016, 4:46pm

@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):

Select - Ionic API Documentation - Ionic Framework

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

sava999 · April 30, 2016, 5:28pm

Vukasine brate nemoj da se sekiras, popravice oni to

jensengar · June 22, 2016, 1:12pm

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…

danielszuk · September 6, 2016, 3:35pm

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!

jensengar · September 9, 2016, 11:16am

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>

danielszuk · September 12, 2016, 10:24am

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

Thanks!

Topic		Replies	Views
Dynamically populating an ion-select ionic-v3	6	2183	August 3, 2016
TypeError: Cannot read property '@' of null ionic-v1	0	657	March 11, 2016
Cannot read property 'selected' of null ionic 2 ionic-v3	1	844	July 19, 2021
Ion-option pre-selection not working ionic-v3	6	2146	July 19, 2021
Cannot read property 'Items' of null ionic-v3	2	1280	January 27, 2017

Ion-select not working inside of ion-menu

Related topics