<p>在某些情况下，将 vaadin-combo-box 放置在 paper-dialog 中时会关闭对话框。</p>

创建于 2017-02-21 · 19评论 · 资料来源: vaadin/vaadin-combo-box

描述

当vaadin-combo-box元素放置在纸质对话框中时，如果用户打开选择框（但没有选择，只是保持打开状态）然后单击对话框中的任意位置关闭对话框。

预期结果

单击对话框中的任意位置（pr.左上角）应关闭该框，但保持对话框打开。

实际结果

单击对话框中的任意位置将关闭整个对话框。

现场演示

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

重现步骤

打开对话框，
打开盒子，不要选择 - 让它保持打开状态，
3.单击对话框的左上角。

资料来源

GoceRibeski

最有用的评论

仅供参考，如果您只是使用鼠标在组合框中选择一个项目，也会发生这种情况......

kito99 于 2017-03-02

👍7

所有19条评论

事件传播存在一种错误。例如。按 Esc 关闭vaadin-combo-box也会关闭对话框。在这种情况下，我通常使用类似on-keydown="_stopPropagation"的东西，然后像这样添加处理程序：

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

IronA11yKeysBehavior还提供了一个stopKeyboardEventPropagation属性，但是vaadin-combo-box没有实现该行为，并且该属性似乎不适用于其他一些元素，看起来它处理事件为时已晚。

web-padawan 于 2017-02-21

我找不到在给定的 Fiddle 中放置将调用stopPropagation的事件的位置。任何的想法？

GoceRibeski 于 2017-02-21

你好呀！

这里的挑战是<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 于 2017-03-01

@Saulis ，不幸的是，您的方法对我不起作用。但是，我只是在纸质对话框上将 noCancelOnOutsideClick 属性设置为 true，从而解决了问题（在这种情况下，当您在对话框之外单击时不需要关闭对话框）。

kito99 于 2017-03-02

👍1

仅供参考，如果您只是使用鼠标在组合框中选择一个项目，也会发生这种情况......

kito99 于 2017-03-02

👍7

将“no-cancel-on-outside-click”应用于纸质对话框元素。当您通过鼠标单击或从键盘选择 vaadin-combo-box 中的元素时，这将防止对话框关闭。

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

artem-vladimirov 于 2017-03-17

👍1

@kito99 / @artem-vladimirov 的 no-cancel-on-outside-click 解决方法通常不适合我，因为我希望用户能够通过外部点击关闭对话框。（但如果这不是要求，我可以确认它可以工作）。

另一个（类似）解决方法是侦听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 于 2017-04-03

除了等待新版本之外，这里还有什么可做的吗？官方vaadin解决方法？

timoteoponce 于 2017-05-10

不知道为什么我这么长时间完全错过了这个问题。这是一个非常基本的可用性问题，应该尽快解决。我会看看我是否可以激励@Saulis或开发团队的其他人来看看这个或下周。

jouni 于 2017-05-10

👍1

嘿伙计们，请尝试分支iron-overlay-cancel （不幸的是，它建立在当前 master 之上，因此可能存在一些依赖冲突，因为它是混合的 - 将 deps 解析为2.0-preview ，并将 Polymer 解析为任何你想）

我还在1.x分支（ iron-overlay-cancel-v1 ）顶部挑选了更改，但目前无法验证它是否可以自己工作，因为我不想弄乱我的 Polymer 2 bower 设置： -)

更新：此修复可能仅适用于iron-overlay-behavior v1.10.3或更高版本。

Saulis 于 2017-05-10

@GoceRibeski @web-padawan @kito99 @artem-vladimirov @panuhorsmalahti @timoteoponce有人有机会尝试修复吗？谢谢！

Saulis 于 2017-06-12

@Saulis感谢您的提醒。我刚刚抓住了iron-overlay-cancel-v1分支，我看到了警告：

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

因此，在打开了paper-dialog和内部vaadin-combo-box之后，我尝试了两件事：

当按下 Esc 键时，对话框关闭，而组合框覆盖保持打开状态，
选择项目时，对话框和组合框都会关闭。

我现在没有太多时间进行调查，但猜想可能是缺少听众的原因。

web-padawan 于 2017-06-12

@web-padawan 谢谢！无需担心丢失的_onBlur ，它是一个故意删除的侦听器，但意外地将侦听器绑定留在了原地。我需要重新测试您报告的那些问题，我自己没有测试过 v1 分支。

Saulis 于 2017-06-12

@web-padawan 我可以确认该修复程序对使用 Polymer 2.x 的iron-overlay-cancel和iron-overlay-cancel-v1 Polymer 1.9.1都有效——请仔细检查您是否有iron-overlay-behavior v1.10.3或更高版本安装（我正在运行2.0.0 ）

Saulis 于 2017-06-12

@Saulis这对我不起作用。事实上，我什至有一个 2.0a4 上不存在的奇怪错误。我模板中的所有文本都消失了

我正在使用iron-overlay-behavior#2.0.0运行 Polymer 2

这是2.0.0-alpha4 ： http ://www.giphy.com/gifs/3ohzdQKeVtoswDSpfW
这是iron-overlay-cancel分支： http ://www.giphy.com/gifs/3o7btZ3T0yMwKkG6fm

arkihillel 于 2017-06-12

@arkihillel我在master iron-overlay-cancel基础，你可以再试一次吗？并确保重新安装所有凉亭。

Saulis 于 2017-06-12

似乎对我有用。
使用：vaadin-combo-box#iron-overlay-cancel，polymer#2.0.1，iron-overlay-behavior#2.0.0

顺便说一句，没什么大不了的，但你可能用_removeOutsideTabListener打错了，即 Tab vs Tap ;)

jonagh 于 2017-06-12

@Saulis现在工作！
抱歉编辑，以为我发现了一个奇怪的错误，但这是我的错误

arkihillel 于 2017-06-13

👍1

是否已经有稳定的解决方案？
当使用鼠标选中一个Item时，会触发两次事件（selectedItemChange）；第一个带有新选定的项目，第二个带有前一个（不可能更改选择）。
谢谢。

JuanCalderon 于 2017-08-04

此页面是否有帮助？

0 / 5 - 0 等级

<p>在某些情况下，将 vaadin-combo-box 放置在 paper-dialog 中时会关闭对话框。</p>

描述

预期结果

实际结果

现场演示

重现步骤

最有用的评论

所有19条评论

相关问题