Opening a paper-dialog on click on paper-input

Viewed 339

I am trying to open <paper-dialog> on a click from <paper-input>, but I want to ignore clicks on the <paper-input>'s floating label. I tried to disable the label's pointer-events, using the CSS mixin below, but it seems to have no effect. How can I accomplish this?

HTML template:

<paper-input class="select" on-click="displayTimezone" 
   value="{{timeZone}}"  
   readonly
   label="Select Time Zone">
   <iron-icon icon="expand-more" suffix></iron-icon>
</paper-input>
<paper-dialog id="timezoneDialog"></paper-dialog>

CSS mixin:

paper-input {
   --paper-input-container-label-focus {
      pointer-events: none !important;
   }
}
2 Answers
Related