Компоненты MDC-Select не имеют проблемы с маркировкой

Question

Я - младший разработчик и работаю над компонентами MDC. У меня вопрос: MDC-Select не всплывает надписью, когда я динамически добавляю новый элемент в его список.Это работает отлично, если я передам массив списков и не буду им манипулировать, но когда я добавляю элемент в его список элементов и выбираю этот новый элемент, он не всплывает на его метке.В результате метка и новое выбранное значение отображаются поверх друг друга, это выглядит как сбой.

Я предположил, что может быть проблема состояния гонки, при обновлении индекса нового элемента и при выборе этого нового элемента онпутать или я нажимаю, пока он все еще обновляет индекс нового элемента.Потому что мое временное решение ждет 600 секунд и добавляет CSS-класс для увеличения надписи, но, конечно, оно меня не удовлетворило, и я не думаю, что это правильное решение.Я не мог понять очень ясно.Я проверил учетную запись Github на компонентах MDC, увидел некоторые проблемы, похожие на мои, но решение не было тем, которое я искал.

      .mdc-select__label {
        left: 0;
        right: initial;
        position: absolute;
        bottom: 8px;
        left: 0;
        -webkit-transform-origin: left top;
        transform-origin: left top;
        -webkit-transition: -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        will-change: transform;
      }

      [dir="rtl"] .mdc-select__label,
      .mdc-select__label[dir="rtl"] {
        left: initial;
        right: 0;
      }

      .mdc-select[dir="rtl"] .mdc-select__label,
      [dir="rtl"] .mdc-select .mdc-select__label {
        -webkit-transform-origin: right top;
        transform-origin: right top;
      }

      .mdc-select__label--float-above {
        -webkit-transform: translateY(-100%) scale(0.75);
        transform: translateY(-100%) scale(0.75);
      }


<div id="root" class\$="mdc-select mdc-select--box mdc-menu-anchor [[addClass]]" role="listbox">
      <div id="surface" class\$="mdc-select__surface [[_error(error)]]" tabindex="0">
        <div id="label" class\$="mdc-select__label [[_float(value)]] [[_hide(label)]]">[[label]]</div>
        <div class="mdc-select__selected-text">[[_display(value)]]</div>
        <div class="mdc-select__bottom-line hidden"></div>
      </div>
      <div id="menu" class\$="mdc-menu mdc-select__menu [[addMenuClass]]">
        <ul class="mdc-list mdc-menu__items" on-click="_selectItem">
          <template is="dom-repeat" id="items" items="[[items]]" mutable-data>
            <li class="mdc-list-item" role="option" tabindex="0">[[_display(item)]]</li>
          </template>
        </ul>
      </div>
      <i id="clear" class$="material-icons mdc-text-field__icon [[_showIfClearable(clearable)]]" on-click="clear">clear</i>
</div>

и мои функции таковы;

static get is() { return 'mdc-select'; }
  static get properties() {
    return {
      addClass: String,
      addMenuClass: String,
      items: {
        type: Array,
        value: () => [],
        observer: "_renderItems"
      },
      value: {
        type: String,
        value: '',
        observer: "_setValue",
        notify: true
      },
      label: String,
      display: {
        type: Function
      },
      error: {
        type: String,
        value: ""
      },
      surfaceWidth: {
        type: Number,
        value: 200
      },
      clearable: {
        type: Boolean,
        value: false
      }
    }
  }

  // display --------------------------------------

  _display(item) {
    return item ? (this.display ? this.display(item) : item) : null
  }

  _hide(val) {
    return val ? null : 'hidden'
  }

  _float(val) {
    return val ? 'mdc-select__label--float-above' : null
  }

  _error(error) {
    return error ? 'error' : null;
  }

  _showIfClearable(clearable) {
    return clearable ? null : 'hidden'
  }

_selectItem(ev) {
    let template = ev.target.__templatizeInstance
    if (template && template.item) {
      this.set('value', template.item)
      this.dispatch('select', template.item)
      // this.component.selectedIndex = template.index;
    } else {
      this.clear()
    }
  }

  _setValue(value) {
    if (!value || !this.component) return
    const val = value
    const idx = this.display ? this.items.findIndex(item => this.display(item) === this.display(val)) : this.items.findIndex(item => item === val)
    this.component.selectedIndex = idx
    this.$.label.classList.add('mdc-select__label--float-above')
  }

  clear() {
    this.dispatch('remove', this.value)
    this.set('value', "")
    if (this.component && typeof this.component.selectedIndex === 'number') { this.component.selectedIndex = -1 }
    this.$.label.classList.remove('mdc-select__label--float-above')
    // this.dispatchSelection()
  }

  dispatch(eventName, value) {
    this.dispatchEvent(new CustomEvent(eventName, {
      detail: { value },
      bubbles: true,
      composed: true
    }));
  }

  dispatchSelection() {
    this.dispatchEvent(new CustomEvent('select', {
      detail: { value: this.value },
      bubbles: true,
      composed: true
    }));
  }

  // init -------------------------------------------

  _renderItems(items) {
    if (items && items.length) { this.attach() }
  }

  attach() {
    // Force a synchronus render so MDC can render items properly
    this.$.items.render();
    this.component = new mdc.select.MDCSelect(this.$.root);

    if (this.value) {
      const val = this.value
      const idx = this.display ? this.items.findIndex(item => this.display(item) === this.display(val)) : this.items.findIndex(item => item === val)
      this.component.selectedIndex = idx
    }
  }