<p>مربع التحرير والسرد vaadin عند وضعه داخل مربع الحوار الورقي يؤدي إلى إغلاق مربع الحوار في بعض الحالات.</p>

تم إنشاؤها على ٢١ فبراير ٢٠١٧ · 19تعليقات · مصدر: vaadin/vaadin-combo-box

وصف

عند وضع عنصر vaadin-combo-box داخل مربع حوار ورقي ، إذا فتح المستخدم المربع للاختيار (لكنه لم يحدد ، اتركه مفتوحًا فقط) ثم انقر في أي مكان في مربع الحوار لإغلاق مربع الحوار.

النتيجة المتوقعة

انقر في أي مكان في مربع الحوار (أعلى الزاوية اليسرى) لإغلاق المربع ، لكن اترك مربع الحوار مفتوحًا.

النتيجة الفعلية

انقر في أي مكان في مربع الحوار لإغلاق مربع الحوار بالكامل.

عرض حي

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

خطوات التكاثر

افتح مربع الحوار ،
افتح الصندوق ، ولا تحدد - اتركه مفتوحًا ،
3. انقر فوق الزاوية اليسرى العلوية من مربع الحوار.

مصدر

GoceRibeski

التعليق الأكثر فائدة

لمعلوماتك ، يحدث هذا أيضًا إذا قمت فقط بتحديد عنصر في مربع التحرير والسرد باستخدام الماوس ...

kito99 في ٢ مارس ٢٠١٧

👍7

ال 19 كومينتر

هناك نوع من الخلل في انتشار الأحداث. E. ز. يؤدي إغلاق vaadin-combo-box بالضغط على Esc إلى إغلاق مربع الحوار أيضًا. في مثل هذه الحالات ، عادةً ما أستخدم شيئًا مثل on-keydown="_stopPropagation" ثم أضف معالجًا مثل هذا:

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

هناك أيضًا خاصية stopKeyboardEventPropagation مقدمة من IronA11yKeysBehavior ، لكن هذا السلوك لم يتم تنفيذه بواسطة vaadin-combo-box ويبدو أن هذه الخاصية لا تعمل مع بعض العناصر الأخرى ، يبدو أنها تتعامل مع الأحداث بعد فوات الأوان.

web-padawan في ٢١ فبراير ٢٠١٧

لا أستطيع أن أجد مكان الحدث الذي سيستدعي stopPropagation في Fiddle معين. اي فكرة؟

GoceRibeski في ٢١ فبراير ٢٠١٧

أهلا!

يتمثل التحدي هنا في أن تراكب <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 في ١ مارس ٢٠١٧

Saulis ، لم ينجح أسلوبك معي ، للأسف. ومع ذلك ، قمت للتو بتعيين خاصية noCancelOnOutsideClick على true في مربع الحوار الورقي ، وهذا يعمل على إصلاح المشكلة (لم يكن هناك حاجة لإغلاق مربع الحوار عند النقر خارجه ، في هذه الحالة).

kito99 في ٢ مارس ٢٠١٧

👍1

لمعلوماتك ، يحدث هذا أيضًا إذا قمت فقط بتحديد عنصر في مربع التحرير والسرد باستخدام الماوس ...

kito99 في ٢ مارس ٢٠١٧

👍7

تطبيق "no-can-Cancel-on-outside-click" على عنصر حوار الورق. سيؤدي هذا إلى منع إغلاق مربع الحوار عند تحديد عنصر في مربع التحرير والسرد vaadin عن طريق النقر بالماوس أو من لوحة المفاتيح.

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

artem-vladimirov في ١٧ مارس ٢٠١٧

👍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 في ٣ أبريل ٢٠١٧

هل هناك شيء يجب القيام به هنا بخلاف انتظار إصدار جديد؟ الحل الرسمي vaadin؟

timoteoponce في ١٠ مايو ٢٠١٧

لست متأكدًا من سبب فوّتي تمامًا لهذه المشكلة لفترة طويلة. هذه مشكلة أساسية في سهولة الاستخدام ويجب إصلاحها في أسرع وقت ممكن. سأرى ما إذا كان بإمكاني إلهام Saulis أو أي شخص آخر من فريق التطوير لإلقاء نظرة هذا أو الأسبوع المقبل.

jouni في ١٠ مايو ٢٠١٧

👍1

مرحبًا يا رفاق ، يرجى تجربة الفرع iron-overlay-cancel (لسوء الحظ ، تم إنشاؤه على رأس المعلم الحالي ، لذلك قد يكون هناك بعض تعارضات التبعية مع كونه مختلطًا - قم بحل التوزيعات إلى 2.0-preview ، والبوليمر إلى أيهما أنت يريد)

لقد اخترت أيضًا التغيير في أعلى الفرع 1.x ( iron-overlay-cancel-v1 ) لكن لا يمكنني حاليًا التحقق من أنه يعمل بنفسي لأنني لا أريد العبث بإعداد تعريشة Polymer 2: -)

التحديث: ربما يعمل هذا الإصلاح فقط على iron-overlay-behavior v1.10.3 أو ما بعده.

Saulis في ١٠ مايو ٢٠١٧

GoceRibeski @ web-padawan @ kito99 @ artem-vladimirovpanuhorsmalahtitimoteoponce هل لدى أي شخص فرصة لتجربة الإصلاح؟ شكرا!

Saulis في ١٢ يونيو ٢٠١٧

Saulis شكرا للتذكير. لقد حصلت للتو على الفرع iron-overlay-cancel-v1 وأرى التحذير:

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

لذلك ، بعد فتح كل من paper-dialog وداخل vaadin-combo-box ، جربت شيئين:

عند الضغط على مفتاح Esc ، يتم إغلاق مربع الحوار بينما يظل تراكب مربع التحرير والسرد مفتوحًا ،
عند تحديد العنصر ، يتم إغلاق كل من مربع الحوار ومربع التحرير والسرد.

ليس لدي الكثير من الوقت للتحقيق في الوقت الحالي ، ولكن أعتقد أن فقدان المستمع قد يكون السبب.

web-padawan في ١٢ يونيو ٢٠١٧

@ ويب بادوان شكرا! لا داعي للقلق بشأن فقدان _onBlur ، فهو مستمع تمت إزالته عن قصد ، لكن المستمع ترك المستمع في مكانه عن طريق الخطأ. أحتاج إلى إعادة اختبار تلك المشكلات التي أبلغت عنها ، فأنا لم أختبر فرع v1 بنفسي.

Saulis في ١٢ يونيو ٢٠١٧

@ 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 في ١٢ يونيو ٢٠١٧

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 في ١٢ يونيو ٢٠١٧

arkihillel لقد أعدت تعيين iron-overlay-cancel فوق master ، هل يمكنك المحاولة مرة أخرى؟ وتأكد من إعادة تثبيت جميع أقسام التعريشة.

Saulis في ١٢ يونيو ٢٠١٧

يبدو أن العمل بالنسبة لي.
باستخدام: vaadin-combo-box # إلغاء تراكب الحديد ، بوليمر # 2.0.1 ، سلوك التراكب الحديدي # 2.0.0

راجع للشغل ، ليست مشكلة كبيرة ، ولكن ربما تكون قد ارتكبت خطأ إملائيًا باستخدام _removeOutsideTabListener ، أي Tab vs Tap ؛)

jonagh في ١٢ يونيو ٢٠١٧

Saulis يعمل الآن!
آسف على التعديل ، أعتقد أنني اكتشفت خطأً غريبًا ولكنه كان خطأ مني

arkihillel في ١٣ يونيو ٢٠١٧

👍1

هل يوجد بالفعل حل مستقر؟
عند تحديد عنصر باستخدام الماوس ، يتم تشغيل الحدث (تغيير العنصر المحدد) مرتين ؛ الأول مع العنصر المحدد الجديد والثاني مع السابق (من المستحيل تغيير التحديد).
شكرا.