<p>vaadin-combo-box при размещении внутри paper-dialog в некоторых случаях закрывает диалог.</p>

Созданный на 21 февр. 2017 · 19Комментарии · Источник: vaadin/vaadin-combo-box

Описание

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

Ожидаемый результат

Щелкните в любом месте диалогового окна (например, в верхнем левом углу), чтобы закрыть окно, но оставьте диалоговое окно открытым.

Фактический результат

Щелчок в любом месте диалогового окна закрывает все диалоговое окно.

Живая демонстрация

https://jsfiddle.net/ribe/02tntfn3/2/

Действия по воспроизведению

Откройте диалоговое окно,
открыть коробку и не выбирать - оставить открытой,
3.Нажмите в верхнем левом углу диалогового окна.

Источник

GoceRibeski

Самый полезный комментарий

К вашему сведению, это также происходит, если вы просто выбираете элемент в поле со списком с помощью мыши...

kito99 2 мар. 2017

👍7

Все 19 Комментарий

Есть своего рода баг с распространением событий. напр. закрытие vaadin-combo-box нажатием клавиши Esc также закрывает диалоговое окно. В таких случаях я обычно использую что-то вроде on-keydown="_stopPropagation" , а затем просто добавляю обработчик следующим образом:

_stopPropafation: function (e) {
  e.stopPropagation()
}

Также есть свойство stopKeyboardEventPropagation , предоставляемое IronA11yKeysBehavior , но это поведение не реализовано в vaadin-combo-box , и это свойство, похоже, не работает для некоторых других элементов, похоже, что оно обрабатывает события слишком поздно.

web-padawan 21 февр. 2017

Я не могу найти, где разместить событие, которое вызовет stopPropagation в данном Fiddle. Любая идея?

GoceRibeski 21 февр. 2017

Всем привет!

Проблема здесь в том, что оверлей <vaadin-combo-box> помещается под <body> , который находится за пределами <paper-dialog> , поэтому он рассматривает любые клики на оверлее поля со списком как «внешние клики». ", которые по умолчанию закрывают диалог.

В качестве обходного пути вы можете отключить внешние щелчки, когда поле со списком открыто:

...
<vaadin-combo-box id="third" label="Focus Third" tabindex="3" on-focus="_focusInput" items="[[items]]" on-blur="_onBlur" on-opened-changed="_onComboBoxOpened">
        </vaadin-combo-box>

<script>
...
_onComboBoxOpened: function(e) {
  if (e.detail.value) {
    this.$.add_row_details_dialog.noCancelOnOutsideClick = true;
  } else {
    this.async(function() {
      this.$.add_row_details_dialog.noCancelOnOutsideClick = false;
    }, 10);
  }
}
...
</script>

Saulis 1 мар. 2017

@Saulis , к сожалению, твой подход мне не помог. Однако я просто установил для свойства noCancelOnOutsideClick значение true в бумажном диалоговом окне, и это решило проблему (в данном случае не требовалось закрывать диалоговое окно, когда вы щелкаете за его пределами).

kito99 2 мар. 2017

👍1

К вашему сведению, это также происходит, если вы просто выбираете элемент в поле со списком с помощью мыши...

kito99 2 мар. 2017

👍7

Примените 'no-cancel-on-outside-click' к элементу paper-dialog. Это предотвратит закрытие диалогового окна при выборе элемента в поле со списком vaadin щелчком мыши или с клавиатуры.

<paper-dialog no-cancel-on-outside-click> <vaadin-combo-box class="elements-box" items="[[arrayOfValues]]"></vaadin-combo-box> </paper-dialog>

artem-vladimirov 17 мар. 2017

👍1

@kito99 / @artem-vladimirov обходной путь без отмены по внешнему клику не подходит вообще или для меня, так как я хочу, чтобы пользователь мог закрыть диалог внешним щелчком. (Но я могу подтвердить, что это работает, если это не требование).

Другой (похожий) обходной путь состоит в том, чтобы прослушивать событие iron-overlay-canceled , а затем вызывать event.stopPropagation() и event.preventDefault() , но у него та же проблема, что и у другого обходного пути — он предотвращает закрытие диалогового окна. по фоновому клику.

Я пытался отличить два события друг от друга, но пока безуспешно.

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

РЕДАКТИРОВАТЬ:

Я придумал следующий обходной путь:

        listeners: {
          "iron-overlay-canceled": "onCanceled",
        },
        onCanceled(event) {
            const paperDialogHoverElement = document.querySelector("paper-dialog:hover");
            const vaadinHoverElement = document.querySelector("vaadin-combo-box-overlay:hover");
            if (paperDialogHoverElement || vaadinHoverElement) {
                event.stopPropagation();
                event.preventDefault();
            }
        }

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

panuhorsmalahti 3 апр. 2017

Тут что-то делать, кроме как ждать новой версии? официальный обходной путь vaadin?

timoteoponce 10 мая 2017

Не уверен, почему я полностью пропустил этот вопрос так долго. Это действительно фундаментальная проблема юзабилити и должна быть исправлена как можно скорее. Я посмотрю, смогу ли я вдохновить @Saulis или кого-то еще из команды разработчиков взглянуть на эту или на следующей неделе.

jouni 10 мая 2017

👍1

Привет, ребята, попробуйте ветку iron-overlay-cancel (к сожалению, она построена поверх текущего мастера, поэтому могут возникнуть некоторые конфликты зависимостей, если она гибридная — разрешайте зависимости в 2.0-preview , а Polymer — в зависимости от того, что вы хотеть)

Я также выбрал изменение в верхней части ветки 1.x ( iron-overlay-cancel-v1 ), но в настоящее время не могу проверить, как оно работает, так как я не хочу испортить свою настройку Bower Polymer 2: -)

Обновление: это исправление, вероятно, работает только на iron-overlay-behavior v1.10.3 или более поздней версии.

Saulis 10 мая 2017

@GoceRibeski @web-padawan @kito99 @artem-vladimirov @panuhorsmalahti @timoteoponce у кого-нибудь есть возможность попробовать исправить? Спасибо!

Saulis 12 июн. 2017

@Saulis Спасибо, что напомнили. Я только что взял ветку iron-overlay-cancel-v1 и вижу предупреждение:

[vaadin-combo-box::_createEventHandler]: listener method `_onBlur` not defined

Итак, после открытия paper-dialog и внутреннего vaadin-combo-box я попробовал две вещи:

При нажатии клавиши Esc диалоговое окно закрывается, а оверлей со списком остается открытым,
При выборе элемента диалоговое окно и поле со списком закрываются.

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

web-padawan 12 июн. 2017

@веб-падаван, спасибо! не нужно беспокоиться об отсутствующем _onBlur , это прослушиватель, который намеренно удален, но случайно оставил привязку слушателя на месте. Мне нужно повторно протестировать те проблемы, о которых вы сообщили, я сам не тестировал ветку v1.

Saulis 12 июн. 2017

@web-padawan Я могу подтвердить, что исправление работает для меня как на iron-overlay-cancel с Polymer 2.x, так и iron-overlay-cancel-v1 Polymer 1.9.1 — пожалуйста, дважды проверьте наличие iron-overlay-behavior v1.10.3 или более поздняя версия (я использую 2.0.0 )

Saulis 12 июн. 2017

@Saulis У меня это не работает. На самом деле у меня даже есть странный баг, которого нет на 2.0a4. Весь текст из моего шаблона исчезает

Я запускаю Polymer 2 с iron-overlay-behavior#2.0.0

Вот 2.0.0-alpha4 : http://www.giphy.com/gifs/3ohzdQKeVtoswDSpfW
Вот ветка iron-overlay-cancel : http://www.giphy.com/gifs/3o7btZ3T0yMwKkG6fm

arkihillel 12 июн. 2017

@arkihillel Я перебазировал iron-overlay-cancel поверх master , можете попробовать еще раз? И убедитесь, что вы переустановили все настройки Bower.

Saulis 12 июн. 2017

Кажется, работает для меня.
Использование: vaadin-combo-box#iron-overlay-cancel, полимер#2.0.1, iron-overlay-behavior#2.0.0

Кстати, ничего страшного, но вы, возможно, сделали опечатку с _removeOutsideTabListener , т.е. Tab vs Tap ;)

jonagh 12 июн. 2017

@Saulis Теперь работает!
Извините за редактирование, думал, что обнаружил странную ошибку, но это была моя ошибка

arkihillel 13 июн. 2017

👍1

Есть уже стабильное решение?
Когда элемент выбирается с помощью мыши, событие (selectedItemChange) запускается два раза; первый с новым выбранным элементом, а второй с предыдущим (невозможно изменить выбор).
Спасибо.