Mobile menu clicks through to the underlying page

[jconlon]

When switching from the wide, desktop view (which works fine) to a small, mobile one selecting a new page will NOT select the page if there is an underlying widget underneath the menu.

Instead if the user selects a page title near the widget in the underlying page it does not select the new page but the widget instead.

Is there a way to make the mobile menu not click through to the underlying page?

[keanulee]

Can't reproduce on https://pwa-starter-kit.appspot.com (after adding a click handler on a heading below the header). Is it because you directly/indirectly made some changes that causes the menu button to have pointer-events: none?

[jconlon]

I was able to reproduce on a new pwa starter app using the typescript template, by adding a paper-expansion-panel like the one in my app. npm i dr-niels-paper-expansion-panel

Then I added it to the my-view3.ts just above the top section.

return html`
      <div>
      <paper-expansion-panel header="Load Avro Schema +">
      <p>
          Just add some text
          More text 
          ...More
        </p>
      </paper-expansion-panel>
      </div>
      <section>

Can see the problem in a local dev server with npm start then browsing to: http://127.0.0.1:8081/view3 with Chrome with the devtools, using the toggle device toolbar to narrow the app to force the mobile menu.

The problem shows up when I try to select the View Two from the menu. Instead it opens my expansion panel underneath.

[keanulee]

Ah, the <paper-item> inside <paper-expansion-panel> is creating a stacking context with position: relative. We don't use z-index in the template because it's messy, but you can fix this by adding one to <app-drawer> (i.e. app-drawer { z-index: 1 }).

[jconlon]

Yes, that fixed it thanks!