Vaadin-combo-box: Разрешить указание ширины наложения

У нас есть точная описанная проблема;
Типичный код для ввода местоположения - "SVG" с надписью "Stavanger Airport Sola".
Это приложение для интрасети, поэтому наши пользователи знают большинство кодов наизусть и хотят писать «SVG» вместо «Ставангер ...»
Кроме того, у нас есть несколько из них рядом друг с другом в редактируемой сетке. Пространства мало, поэтому мы хотим, чтобы размер столбцов и полей со списком соответствовал коду, а не заголовку.

Ваадин предложил обходной путь, который решает нашу ближайшую проблему:

<strong i="10">@CssImport</strong>
    ( id        = "vaadin-combo-box-overlay-override"
    , value     = "./styles/vaadin-combo-box-overlay.css"
    , themeFor  = "vaadin-combo-box-overlay"
    )

./styles/vaadin-combo-box-overlay.css:

:host {
     width: 500px !important;
}

Или, если вы хотите, чтобы это было только в некоторых комбинированных списках:

:host([theme~="large"]) {
     width: 500px !important;
}

combobox.getElement().setAttribute("theme", "large");

Дубликат vaadin / vaadin-combo-box / issues / 529.

См. Предлагаемое улучшение демонстрации на https://github.com/vaadin/vaadin-combo-box/issues/529#issuecomment -374611447

Чтобы динамически обновить ширину оверлея ComboBox:

:host([theme="my-combo-box"]) {
  width: var(--my-combo-box-overlay-width, 200px) !important;
}

UI.getCurrent().getPage().executeJs("ShadyCSS.styleDocument({'--my-combo-box-overlay-width': $0 + 'px'})", newWidthAsInteger);

Теперь в веб-компоненте появилась новая функция, которая упрощает эту задачу (закрытая проблема https://github.com/vaadin/vaadin-combo-box/issues/529, см. Объединенный PR https://github.com/vaadin/ vaadin-combo-box / pull / 876)

Теперь эта проблема должна быть связана с предоставлением вспомогательного метода, например setOverlayWidth(String cssLength) для установки этой новой настраиваемой опоры CSS --vaadin-combo-box-overlay-width .

Я могу подтвердить, что следующий код отлично работает, как это было предложено @Haprog

comboBox.getElement().getStyle().set("--vaadin-combo-box-overlay-width", "400px")

На новом сайте документации есть примеры использования упомянутой выше функции:
https://vaadin.com/docs-beta/latest/ds/components/combo-box/#popup -width