search

PolymerElements / iron-menu-behavior

Accessible menu behavior
18 stars 28 forks source link

Events of type `activateEvent` are not allowed to bubble but may be needed by ancestors. #56

Open bicknellr opened 8 years ago

bicknellr commented 8 years ago

IronMenuBehavior calls stopPropagation on any event of type activateEvent to prevent ancestor elements with IronMenuBehavior from also responding, but this prevents all ancestors from responding. IronMenuBehavior should track events it has responded to already and ignore them rather than preventing them from bubbling entirely.

s-trooper commented 8 years ago

i suppose that is the problem i have. when i focus an element in the "paper-listbox" then window.addEventListener("keydown", hdr); don't get events anymore.

Is there a workaround than i can catch F5 key while the focus is on "paper-listbox" ?

tgsergeant commented 8 years ago

The same thing happens with keydown events, which are also stopped from propagating. This prevents, for example, the focus trapping in app-drawer from working. Here's a JSBin demonstrating: https://jsbin.com/welabajoce/edit?html,output. Click to open the drawer, and then press tab twice. The <a> will get focus, even though the drawer is supposed to trap focus.

MKuenzi commented 8 years ago

The issue @tgsergeant mentioned is causing issues for me as well as I am trying to catch KeyboardEvents with backspace to prevent navigating to the previous page.

mercmobily commented 8 years ago

Here is another example of this causing a problem -- which is a very common scenario I am afraid.

  <app-drawer-layout fullbleed>

    <!-- Drawer content -->
    <app-drawer swipe-open>
      <div style="height: 100%; overflow: auto;">

      <app-toolbar>
          <div class="main-title">My app</div>
      </app-toolbar>

      <p>Testing1</p>
      <paper-menu on-tap="_paperMenuTapped" id="menu-main" on-iron-select="_selectionEvent" selected="[[page]]" attr-for-selected="name">
        <p>Testing2</p>
        <paper-item drawer-toggle name="view1"><iron-icon icon="home"></iron-icon><a class="item" href="/page/view1">View One</a></paper-item>
        <paper-item drawer-toggle name="view2"><iron-icon icon="question-answer"></iron-icon><a class="item" href="/page/view2">View Two</a></paper-item>
        <paper-item drawer-toggle name="view3"><iron-icon icon="work"></iron-icon><a class="item" href="/page/view3">View Three</a></paper-item>

The tap events don't get propagated. This implies that drawer-toggle doesn't actually work. This made it a fun hours of looking at code and figuring out how things work...