paper-dropdown-menu is always disabled

[MoskitoHero]

No matter what I do, paper-dropdown-menu is always disabled. This happens in all browsers.

    <paper-dropdown-menu label="Type">
      <paper-menu class="dropdown-content">
        <paper-item>One</paper-item>
        <paper-item>Two</paper-item>
      </paper-menu>
    </paper-dropdown-menu>

gets rendered as

<paper-dropdown-menu class="x-scope paper-dropdown-menu-0" aria-disabled="false" aria-haspopup="true" aria-autocomplete="none" role="combobox" label="Type">
  <!-- this div fulfills an a11y requirement for combobox, do not remove -->
  <div class="style-scope paper-dropdown-menu" role="button"></div>
  <paper-menu-button vertical-align="top" horizontal-align="right" tabindex="-1" style="pointer-events: none;" aria-disabled="true" aria-haspopup="true" role="group" class="style-scope paper-dropdown-menu x-scope paper-menu-button-0" id="menuButton" disabled="">
    <div class="style-scope paper-menu-button" id="trigger">
      <div class="dropdown-trigger style-scope paper-dropdown-menu">
        <paper-ripple class="style-scope paper-dropdown-menu">
          <div class="style-scope paper-ripple" id="background"></div>
          <div class="style-scope paper-ripple" id="waves"></div>
        </paper-ripple>
        <!-- paper-input has type="text" for a11y, do not remove -->
        <paper-input style="pointer-events: none;" aria-disabled="true" tabindex="-1" class="style-scope paper-dropdown-menu x-scope paper-input-0" type="text" readonly="" disabled="">
          <paper-input-container disabled="" class="style-scope paper-input x-scope paper-input-container-1">
            <div class="floated-label-placeholder style-scope paper-input-container">&nbsp;</div>
            <template class="style-scope paper-input-container" is="dom-if"></template>
            <div class="input-content style-scope paper-input-container">
              <div style="position: relative;" class="label-and-input-container style-scope paper-input-container" id="labelAndInputContainer">
                <label id="paper-input-label-250" class="style-scope paper-input">Type</label><input tabindex="0" aria-labelledby="paper-input-label-250" aria-describedby="" autocorrect="off" autocapitalize="none" readonly="" placeholder="" autocomplete="off" disabled="" class="style-scope paper-input" is="iron-input" id="input" type="text">
                <template class="style-scope paper-input" is="dom-if"></template>
                <template class="style-scope paper-input" is="dom-if"></template>
              </div>
              <iron-icon class="style-scope paper-dropdown-menu x-scope iron-icon-1" icon="paper-dropdown-menu:arrow-drop-down" suffix="">
                <svg class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                  <g class="style-scope iron-icon">
                    <path class="style-scope iron-icon" d="M7 10l5 5 5-5z"></path>
                  </g>
                </svg>
              </iron-icon>
            </div>
            <div class="underline style-scope paper-input-container">
              <div class="unfocused-line style-scope paper-input-container"></div>
              <div class="focused-line style-scope paper-input-container"></div>
            </div>
            <div class="add-on-content style-scope paper-input-container">
            </div>
          </paper-input-container>
        </paper-input>
      </div>
    </div>
    <iron-dropdown style="outline: medium none; display: none;" vertical-align="top" horizontal-align="right" aria-hidden="true" aria-disabled="false" class="style-scope paper-menu-button" id="dropdown">
      <div class="style-scope iron-dropdown" id="contentWrapper">
        <paper-material elevation="1" class="dropdown-content style-scope paper-menu-button x-scope paper-material-0">
          <paper-menu aria-expanded="false" class="dropdown-content">
            <paper-item class="x-scope paper-item-0" aria-disabled="false" tabindex="0" role="option">
              One
            </paper-item>
            <paper-item class="x-scope paper-item-0" aria-disabled="false" tabindex="0" role="option">
              Two
            </paper-item>
          </paper-menu>
        </paper-material>
      </div>
    </iron-dropdown>
  </paper-menu-button>
</paper-dropdown-menu>

and is completey greyed out

[MoskitoHero]

Sorry to ask, but is this still maintained ?

[toby-1-kenobi]

apparently not.

I have the same problem. I found a workaround, but it doesn't seem to work for me, it enables the element, but then clicking on it doesn't open the dropdown.

[ptytb]

Solved:

yarn add web-animations-js

import 'web-animations-js/web-animations-next.min.js';

Source. The TL;DR is that KeyframeEffect should be polyfilled.