раскрывающееся меню бумаги не работает в освещенном элементе

Question

Редактировать : Оказывается, это помогает, если вы импортируете paper-listbox перед использованием его в другом элементе.По какой-то причине я думал, что он импортируется как зависимость от другого элемента, который я импортировал , но нет.Как только я добавил явный импорт, он начал работать правильно.Далее следует оригинальный вопрос.

Для начала эта проблема возникает только при использовании paper-dropdown-menu (с paper-listbox внутри) в lit-element.Мы используем компонент почти одинаково в нескольких PolymerElement (s) без проблем.

По сути, я вижу две проблемы с paper-dropdown-menu.Во-первых, он никогда не отображает значение какого-либо типа, будь то атрибут label или действительное выбранное значение, и при этом его свойство value никогда не изменяется, даже когда внутри paper-listbox задано значение.Вторая проблема заключается в том, что кажется невозможным выбрать какое-либо значение из выпадающего меню - вы можете щелкнуть по ним, но список не закрывается, и имя выбранного параметра не отображается на текстовом дисплее меню.

Из-за характера проблем кажется, что проблема в том, что paper-dropdown-menu и paper-listbox внутри него не взаимодействуют должным образом ... но я буду проклят, если яможно понять, почему.

Вот разметка, о которой идет речь в методе render элемента:

<paper-dropdown-menu id="homepageSelect">
    <paper-listbox slot="dropdown-content" 
        attr-for-selected="item-value" 
        selected="${state.homepage}"
        label="Select a homepage"
        @selected-changed="_homepageChanged">

        ${state.homepageOptions.map(o => html`
            <paper-item item-value="${o.value}">${o.name}</paper-item>
        `)}

    </paper-listbox>
</paper-dropdown-menu> 

И фиктивные данные, которые мы используем:

{
    "title": "Boss of you",
    "fullName": "J Jonah Jameson",
    "username": "jjj",
    "client": "Daily Bugle",
    "homepage": "http://sampledomain.com/",
    "homepageOptions": [{
        "name": "FrontPage",
        "value": "http://sampledomain.com/"
    }, {
        "name": "Editorials",
        "value": "http://sampledomain.com/opinion"
    }, {
        "name": "Metro",
        "value": "http://sampledomain.com/metro"
    }],
    "groups": [{
        "name": "Admin",
        "description": "Administers the whole shebang"
    }, {
        "name": "Power users",
        "description": "Like regular users, but powerful"
    }, {
        "name": "Gen pop",
        "description": "Down in the weeds"
    }],
    "changePasswordUrl": "https://change.password.now",
    "email": "test@email.com",
    "phoneWork": "404-555-1234",
    "phoneCell": "404-555-4321",
    "phoneHome": "404-123-5555",
    "address": {
        "address1": "1234 Boulevard St",
        "address2": "Ste 1",
        "city": "Atlanta",
        "state": "GA",
        "zip": "30303",
        "country": "USA",
        "type": "Office"
    }
}

Я бы сделал скриншот того, как это выглядит, но только представьте выпадающий список, в котором ничего не выбрано, и вы получите его.При щелчке по нему на самом деле отображается внутренний paper-listbox, но список не закрывается при щелчке, а значение, по которому щелкнули, не попадает в элемент paper-dropdown-menu.

Кто-нибудь имеет представление о том, что происходит?Теоретически, PolymerElement должен быть в состоянии работать внутри любой формы HTML-разметки - тот факт, что он в пределах lit-element не должен иметь никакого значения, и не для любого другого компонента, который мы используем.Тем не менее, этот компонент, используя этот шаблон, работает в PolymerElement, но не работает здесь, и я не понимаю, почему.

Answer 1

Он никогда не отображает значение любого типа, будь то атрибут label или фактическое выбранное значение, и его свойство value никогда не изменяется, даже когда внутри paper-listbox задано значение

Внутри шаблона, на который вы ссылаетесь state. Если state является свойством элемента, тогда вы должны ссылаться на него с this. (если только это не переменная, которую вы определили в части функции render(), которую вы не вставили здесь). Это может быть причиной пропущенных значений.

Отсутствует метка, потому что вы положили атрибут label в <paper-listbox>, тогда как он должен быть в <paper-dropdown-menu>.

Кажется невозможным выбрать какое-либо значение из выпадающего меню - вы можете щелкнуть по ним, но список не закрывается, и имя выбранного параметра не отображается на текстовом дисплее меню.

Имя, которое не отображается, должно совпадать с предыдущим пунктом. Я попробовал ваш пример локально, и список на самом деле не закрывается из-за ошибки анимации. Это происходит потому, что в раскрывающемся списке используются некоторые функции API веб-анимации, которые необходимо заполнить:

$ npm install web-animations-js

<script src="node_modules/web-animations-js/web-animations-next-lite.min.js"></script>

Кроме того, вы передаете строку в @selected-changed (как в Polymer), в то время как вы должны использовать интерполяцию:

@selected-change=${e => this. _homepageChanged(e)}

or

@selected-change=${this. _homepageChanged.bind(this)}

Таким образом, кажется, что все работает правильно: