on-click or on-tap removed from div inside app-toolbar

[Mika83AC]

Hello everyone,

when a "on-click" or "on-tap" is added to a div (maybe only to the div containing the "main-title" attribute) inside a app-toolbar, they get kicked by Polymer when executed in the browser. When looking into the code with Chrome Dev Tools, the event isn't in the code any more.

<app-toolbar>
   <div class="logo" main-title on-tap="doSomething">
      AppTitleText
   </div>
</app-toolbar>

Regards,
Michael

[keanulee]

That's because [main-title] has pointer-events: none applied to it (https://github.com/PolymerElements/app-layout/blob/master/app-toolbar/app-toolbar.html#L86). This is done so that buttons in app-header with condenses = true will properly receive click/tap events (since [main-title] is physically on top of the button, but we want the click/tap to be on the button - e.g. https://github.com/PolymerElements/app-layout/blob/master/app-header/demo/blend-background-1.html#L102)

[Hunsin]

Hi, if I want to add an link to main-title, what is the proper way to do it?

[frankiefu]

You can override the default CSS but make sure to also adjust the title so it's not on top of the button, something like this:

[main-title] {
  /* override pointer-events: none set by app-toolbar */
  pointer-events: auto;
  /* set margin-right so title won't be on top of the 2 buttons on the right */
  margin-right: 100px
}

[BorntraegerMarc]

Would maybe be cool to add this in the webcomponentjs docs or somewhere...