search

PolymerElements / paper-dropdown-menu

A Material Design browser select element
https://www.webcomponents.org/element/PolymerElements/paper-dropdown-menu
61 stars 107 forks source link

Dropdown contents location is not anchored to dropdown menu location #265

Closed craig-jennings closed 6 years ago

craig-jennings commented 6 years ago

Description

<paper-listbox> is not anchored to the location of <paper-dropdown-menu> which causes positioning issues when a mobile device's keyboard becomes hidden and the dropdown moves.

Expected outcome

<paper-listbox> would stay positioned relative to <paper-dropdown-menu> location.

Actual outcome

Element remains fixed in original position even after <paper-dropdown-menu> element has moved.

Live Demo

example

Steps to reproduce

<paper-dialog opened modal>
  <paper-input label="Name" type="text"></paper-input>

  <paper-dropdown-menu>
    <paper-listbox slot="dropdown-content" selected="0">
      <paper-item>Test</paper-item>
    </paper-listbox>
  </paper-dropdown-menu>
</paper-dialog>
  1. Create this form and load it on a mobile device (http://run.plnkr.co/Y3VTb4OFHYiBOPzB/ for convenience)
  2. Focus on the <paper-input> element
  3. Focus on the <paper-dropdown-menu> element
  4. Notice the position of the <paper-listbox> is wrong compared to the location of the <paper-dropdown-menu>

Browsers Affected