title: Opening a paper-dialog on click on paper-input
body: <p>I am trying to open <a href="https://www.webcomponents.org/element/PolymerElements/paper-dialog" rel="nofollow noreferrer"><code>&lt;paper-dialog&gt;</code></a> on a click from <a href="https://www.webcomponents.org/element/PolymerElements/paper-input" rel="nofollow noreferrer"><code>&lt;paper-input&gt;</code></a>, but I want to ignore clicks on the <code>&lt;paper-input&gt;</code>'s floating label. I tried to disable the label's <code>pointer-events</code>, using the CSS mixin below, but it seems to have no effect. How can I accomplish this?</p>
  
  <p><em>HTML template:</em></p>
  
  <pre><code>&lt;paper-input class="select" on-click="displayTimezone" 
     value="{{timeZone}}"  
     readonly
     label="Select Time Zone"&gt;
     &lt;iron-icon icon="expand-more" suffix&gt;&lt;/iron-icon&gt;
  &lt;/paper-input&gt;
  &lt;paper-dialog id="timezoneDialog"&gt;&lt;/paper-dialog&gt;
  </code></pre>
  
  <p><em>CSS mixin:</em></p>
  
  <pre><code>paper-input {
     --paper-input-container-label-focus {
        pointer-events: none !important;
     }
  }
  </code></pre>