CODEWITHSUNDEEP
polymer
li207
li207

Reputation: 11

Paper-input inside paper-dropdown-menu is not properly focused

I tried to add a paper-input inside a paper-dropdown-menu so that I can search for items in the dropdown menu. Like this,

<paper-dropdown-menu>
  <paper-menu>
    <paper-input label="Search"></paper-input>
    <paper-item>...</paper-item>
  </paper-menu>
</paper-dropdown-menu

I've also wrote some js to override the default behaviour of the paper-dropdown-menu so that when I click on the paper-input, the menu doesn't close.

Now the problem is that when I click on the paper-input, I actually cannot type in anything because it seems the paper-input is not focused, or it is focused but in a unexpected way like a normal paper-input. I have to press a 'tab' to actually be able to type in something.

Is anyone know why this happens? Thanks!

Upvotes: 1

Views: 1119

Answers (1)

lcyh
lcyh

Reputation: 94

Move the paper-input outside the paper-menu, into a new div under the paper-dropdown-menu with the class "dropdown-content"

<paper-dropdown-menu label='Fruit'>
  <div class="dropdown-content">
    <paper-input label="Search"></paper-input>
    <paper-menu> 
      <paper-item>Apples</paper-item>
      <paper-item>Oranges</paper-item>      
    </paper-menu>
  </div>
</paper-dropdown-menu>

Here's a working example: https://jsbin.com/tirinibiso/edit?html,output The paper-dropdown-menu example given by Polymer is there as well.

Upvotes: 3

Related Questions