ペーパー入力をクリックすると紙のダイアログを開く

Question

<paper-input>から<paper-dialog>をクリックしようとしていますが、<paper-input>のフローティングラベルのクリックを無視したいとします。下記のCSS mixinを使って、ラベルのpointer-eventsを無効にしようとしましたが、効果がないようです。どうすればこれを達成できますか？

HTMLテンプレート：

<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のミックスイン：

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

Answer 1

あなたはpaper-input-containerを使用することができます。

<paper-input-container> 
    <label slot="label">Select Time Zone</label> 
    <iron-input slot="input" on-click="displayTimezone" bind-value="{{timeZone}}"> 
    <input> 
    </iron-input> 
    <iron-icon icon="expand-more" slot="suffix"></iron-icon> 
</paper-input-container> 

あなたは--paper-input-container-shared-input-styleミックスインでスタイルできる材料設計を取得すること。

<style> 
    :host { 
    display: block; 
    padding: 8px 0; 
    --paper-input-container-shared-input-style: { 
     position: relative; /* to make a stacking context */ 
     outline: none; 
     box-shadow: none; 
     padding: 0; 
     width: 100%; 
     max-width: 100%; 
     background: transparent; 
     border: none; 
     color: var(--paper-input-container-input-color, var(--primary-text-color)); 
     -webkit-appearance: none; 
     text-align: inherit; 
     vertical-align: bottom; 
     @apply --paper-font-subhead; 
    }; 
    @apply --paper-input-container; 

    } 
    input { border:none; width: 100%;} 
    input:focus { outline: none;} 
</style> 

Answer 2

あなただけのインナー<input>（ラベルやアンダーラインからのクリックを無視して）からのクリックを処理するevent targetをチェックすることもできます

displayTimezone: function(e) { 
    // open dialog only for <input> clicks 
    if (e.target.localName === 'input') { 
    this.$.timezoneDialog.open(); 
    } 
} 

demo

を