<p>vaadin-combo-boxをpaper-dialog内に配置すると、ダイアログが閉じてしまう場合があります。</p>
説明
vaadin-combo-box要素がpaper-dialog内に配置されている場合、ユーザーが選択のためにボックスを開いた場合（ただし、選択せず、開いたままにする）、ダイアログ内の任意の場所をクリックしてダイアログを閉じます。
期待される結果
ダイアログの任意の場所（pr。左上隅）をクリックすると、ボックスが閉じますが、ダイアログは開いたままになります。
実際の結果
ダイアログ内の任意の場所をクリックすると、ダイアログ全体が閉じます。
ライブデモ
https://jsfiddle.net/ribe/02tntfn3/2/
再現する手順
- ダイアログを開き、
- ボックスを開き、選択しないでください-開いたままにして、
3.ダイアログの左上隅をクリックします。
GoceRibeski
全てのコメント19件
イベントの伝播には一種のバグがあります。 例： Escキーを押してvaadin-combo-boxを閉じると、ダイアログも閉じます。 このような場合、私は通常on-keydown="_stopPropagation"のようなものを使用してから、次のようなハンドラーを追加します。
_stopPropafation: function (e) {
e.stopPropagation()
}
IronA11yKeysBehaviorによって提供されるstopKeyboardEventPropagationプロパティもありますが、その動作はvaadin-combo-boxによって実装されておらず、そのプロパティは他のいくつかの要素では機能しないようで、イベントの処理が遅すぎるようです。
web-padawan
2017年02月21日
指定されたフィドルで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日
参考までに、これは、マウスを使用してコンボボックス内のアイテムを選択した場合にも発生します...
kito99
2017年03月02日
'no-cancel-on-outside-click'をpaper-dialog要素に適用します。 これにより、マウスクリックまたはキーボードから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日
@ kito99 / @ artem-vladimirovのno-cancel-on-outside-clickによる回避策は、ユーザーが外部クリックでダイアログを閉じることができるようにするため、一般的にも私にとっても適切ではありません。 （ただし、それが要件でない場合は、機能することを確認できます）。
別の（同様の）回避策は、 iron-overlay-canceledイベントをリッスンしてから、$ event.stopPropagation()とevent.preventDefault()を呼び出すことですが、これには他の回避策と同じ問題があります。ダイアログを閉じることができません。バックグラウンドクリックで。
私は2つのイベントを互いに区別しようとしましたが、今のところ運がありません。
アイテムを選択するだけでダイアログが閉じ、紙のダイアログをクリックして選択をキャンセルするという@ 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日
やあみんな、ブランチiron-overlay-cancelを試してみてください（残念ながら、それは現在のマスターの上に構築されているので、ハイブリッドであると依存関係の競合が発生する可能性があります-depsを2.0-previewに解決し、Polymerをどちらにでも解決します欲しいです）
また、 1.xブランチ（ iron-overlay-cancel-v1 ）の上で変更をチェリーピックしましたが、Polymer 2バウアーのセットアップを台無しにしたくないので、現在自分で機能していることを確認できません。 -）
更新：この修正は、おそらく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の両方を開いた後、2つのことを試しました。
- Escキーを押すと、コンボボックスオーバーレイが開いたままの状態でダイアログが閉じ、
- 項目を選択すると、ダイアログとコンボボックスの両方が閉じます。
今は調査する時間があまりありませんが、リスナーがいないことが原因かもしれないと思います。
web-padawan
2017年06月12日
@ web-padawanありがとう！ _onBlurが欠落していることを心配する必要はありません。リスナーは意図的に削除されていますが、誤ってリスナーのバインドをそのままにしてしまいました。 報告された問題を再テストする必要があります。v1ブランチは自分でテストしていません。
Saulis
2017年06月12日
@ web-padawanポリマー2.xを使用したiron-overlay-cancelとiron-overlay-cancel-v1ポリマー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でPolymer2を実行しています
これが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日
すでに安定した解決策はありますか？
マウスを使用してアイテムを選択すると、イベント（selectedItemChange）が2回トリガーされます。 1つ目は新しく選択されたアイテムで、2つ目は前のアイテムです（選択を変更することはできません）。
ありがとう。
JuanCalderon
2017年08月04日
関連する問題
silentHoo
·
3コメント
anasmi
·
18コメント
OlliTietavainenVaadin
·
6コメント
steffen-harbich-cognitum
·
8コメント
mas4ivv
·
16コメント
最も参考になるコメント
参考までに、これは、マウスを使用してコンボボックス内のアイテムを選択した場合にも発生します...