CODEWITHSUNDEEP
htmltypescriptangularpolymerpaper-elements
Jessel
Jessel

Reputation: 43

Polymer Paper-Menu HTML not rendered correctly in browser

I have a very basic attempt at implementing paper-menu. However the rendered HTML is not right and breaks the interaction. When clicking a menu item, the entire list disappears. I've identified it's because the paper-item elements are not rendered inside a very key div inside the paper-menu element.

My component.html looks like this:

<div>
    <paper-menu selected="0">
        <paper-item>Location 1</paper-item>
        <paper-item>Location 2</paper-item>
    </paper-menu>
</div>

However, what gets rendered is like this:

<div>
    <paper-menu role="menu" tabindex="0" selected="0" class="x-scope paper-menu-0">
      <div class="selectable-content style-scope paper-menu">
      </div>
      <paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">Location 1</paper-item>
      <paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">Location 2</paper-item>
    </paper-menu>
</div>

If I manipulate the rendered HTML in the browser so the close div tag properly wraps the paper-item elements, the interaction works.

What am I doing wrong?

In my index.html I have:

<script src="lib/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="lib/paper-button/paper-button.html" />
<link rel="import" href="lib/paper-input/paper-input.html" />
<link rel="import" href="lib/paper-item/paper-item.html" />
<link rel="import" href="lib/paper-menu/paper-menu.html" />
<link rel="import" href="lib/paper-listbox/paper-listbox.html" />
<link rel="import" href="lib/paper-toggle-button/paper-toggle-button.html" />
<link rel="import" href="lib/paper-progress/paper-progress.html" />
<link rel="import" href="lib/paper-dropdown-menu/paper-dropdown-menu.html" />

And in my bower.json I am referencing the following versions

{
  "name": "permit-manager-app",
  "private": true,
  "dependencies": {
    "polymer": "^1.4.0",
    "webcomponentsjs": "^0.7.22",
    "paper-button": "^1.0.11",
    "paper-input": "^1.1.10",
    "paper-progress": "^1.0.9",
    "paper-dropdown-menu": "1.2.1",
    "paper-menu": "1.2.2",
    "paper-item": "1.2.1",
    "paper-listbox": "1.1.2",
    "paper-toggle-button": "^1.1.2"

  }
}

And this is Angular2 beta 17

Upvotes: 1

Views: 104

Answers (1)

Jessel
Jessel

Reputation: 43

I've come across a similar issue within the same project with the paper-dropdown-menu where a critical section is rendered out of place and the control does not function.

details are here:

Polymer paper-dropdown-menu not rendered correctly in browser

Upvotes: 0

Related Questions