Не удается заставить мой фокус ввода работать?

Question

Почему мой this.$.search.focus() не работает?

<polymer-element name="site-search"> 
 
    <template> 
 

 
<style> 
 
    :host { 
 
\t font-family: 'RobotoDraft', sans-serif; 
 
\t font-size: 14px; 
 
    } 
 
    .condensed input, .condensed /deep/ .underline { 
 
    display: none; 
 
    } 
 
</style> 
 

 
<section horizontal layout> 
 
    <core-icon-button 
 
     id="button" 
 
     icon="search" 
 
     title="search" 
 
     aria-label="search" 
 
     disabled?="{{!canBeCondensed}}" 
 
     on-tap="{{toggleSearch}}"> 
 
    </core-icon-button> 
 
\t 
 
    <paper-input-decorator flex 
 
     label="{{label}}" 
 
     floatingLabel="{{floatingLabel}}" 
 
     value="{{value}}" 
 
     disabled?="{{disabled || condensed}}" 
 
     class="{{ {condensed: condensed} | tokenList }}"> 
 
     <input 
 
      id="search" 
 
      on-blur="{{onBlur}}" 
 
      type="search" 
 
      value="{{value}}" 
 
      committedValue="{{committedValue}}" 
 
      on-keyup="{{onKeyUp}}" 
 
      disabled?="{{disabled}}"> 
 
    </paper-input-decorator> 
 
</section> 
 

 
    </template> 
 

 
    <script> 
 
Polymer({ 
 
    publish: { 
 
    label: '', 
 
    floatingLabel: false, 
 
    disabled: {value: false, reflect: true}, 
 
    canBeCondensed: false, 
 
    condensed: false, 
 
    site: window.location.hostname 
 
    }, 
 
    toggleSearch: function() { 
 
    if (!this.canBeCondensed) return; 
 
\t this.$.search.focus() <==== Doesn't work. Why? 
 
    this.condensed = !this.condensed; 
 
\t this.$.button.hidden=true 
 
    }, 
 
    onKeyUp: function(e) { 
 
    if (e.keyCode == 13) { // Enter. 
 
     var q = encodeURIComponent('site:' + this.site + ' ' + this.value); 
 
     window.open('https://www.google.com/search?q=' + q); 
 
    } 
 
    }, 
 
    onBlur:function(e) { 
 
\t this.condensed = !this.condensed; 
 
    this.$.button.hidden=false 
 
    }, 
 
}); 
 
    </script> 
 

 
</polymer-element>

Answer 1

Попробуйте удалить .condensed input, в вашем CSS.

Потому что, когда вы меняете класс paper-input-decorator, ваш оригинальный css также обновит внутренний класс input, и это приведет к потере фокуса input.

Кроме того, вы можете удалить все class="{{ {condensed: condensed} | tokenList }}" и скрыть/показать underline элемент в js. Например:

toggleSearch: function() { 
    if (!this.canBeCondensed) return; 
    this.$.search.focus(); 
    //this.condensed = !this.condensed; 
    this.$.button.hidden = true; 

    var underline = document.querySelector('paper-input-decorator::shadow .underline'); 
    underline.hidden = true; 
},