React-dnd: مشكلة مع فايرفوكس يخسر الأحداث

تم إنشاؤها على ٥ أبريل ٢٠١٨ · 7تعليقات · مصدر: react-dnd/react-dnd

لقد وجدت خطأً سيئًا يبدو أنه يتسبب في مشكلة ربما في Firefox نفسه. يمكنني إعادة إنتاج هذا الخطأ حتى في مثال تعليمي الشطرنج. في الأساس ، يمكنك الدخول في حالة لا يظهر فيها Firefox لإرسال أي أحداث للماوس باستثناء السحب.

التكاثر

انقر فوق مصدر السحب وابدأ في سحبه ، ثم حرر الماوس قبل ظهور المعاينة. في مثال البرنامج التعليمي ، بعد القيام بذلك مرة واحدة ، ستظل أهداف الإسقاط مميزة. يتعين عليك أحيانًا القيام بذلك على الفور مرة أخرى لتشغيل الخطأ الكامل.

من الأسهل تحقيق ذلك على الصفحات الأبطأ حيث تستغرق المعاينة بعض الوقت لتظهر. لدي صفحة بطيئة جدًا ، ويمكنني إعادة إنتاجها عن طريق تحرير النقرة أحيانًا حتى بعد ثانية من بدء السحب.

الأعراض

بمجرد تشغيل الخطأ ، يبدو أن Firefox يتوقف عن إرسال أحداث السحب بخلاف السحب إلى كل علامة تبويب تقريبًا. في بعض الأحيان يمكنني التسبب في حدوث المشكلة في صفحة واحدة مع رد الفعل عليها ، ثم تبدأ جميع علامات التبويب الأخرى في إظهار نفس الأعراض.

هناك طريقتان فقط لإخراج نفسك من هذه الحالة المنهارة. أولاً ، يمكنك إغلاق المتصفح وإعادة فتحه. ثانيًا ، يمكنك بدء السحب على الصفحة حيث لا يزال رد فعل dnd يعمل. بمجرد القيام بذلك ، ستتلقى الصفحة التي تسببت في الاستراحة حدث سحب. وبالتالي:

يرى علامة التبويب 1 النقرات
لا ترى علامة التبويب 1 المزيد من الأحداث بخلاف clickstart
افتح علامة التبويب 2 وابدأ في السحب
يرى علامة التبويب 1 نقرة ويعمل الآن مرة أخرى

إليك مقطع فيديو يوضح هذا السلوك الغريب باستخدام علامتي تبويب تعرضان https://react-dnd.github.io/react-dnd/examples-chessboard-tutorial-app.html.

ReactDnDFirefoxBug.zip

أنا على macOS High Sierra 10.13.3 (17D102) مع Firefox 59.0.2 (64 بت). يبدو أنه يحدث في أي إصدار> = 57. لقد أعدت إنتاج الخطأ مع رد الفعل 2.6.0 و 2.5.4.

سأكون سعيدًا بالمساعدة في أي اختبار أو تصحيح أخطاء إما لإصلاح هذا ، أو التوصل إلى حل بديل إذا كانت المشكلة في Firefox نفسه.

browser bug bug wontfix

مصدر

jsteel

👍10

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

تم فتح التذكرة باستخدام Mozilla هنا: https://bugzilla.mozilla.org/show_bug.cgi ؟id=1452131

jsteel في ٦ أبريل ٢٠١٨

👍3

ال 7 كومينتر

لقد وجدت طريقة أفضل لتشغيل الخطأ الذي لا يستخدم حتى رد الفعل.

بمجرد كسر الصفحة ، فإن الطريقة الوحيدة التي يمكنني إيجادها لإصلاحها هي تحريك قطعة الشطرنج في مثال رد الفعل ، أو إعادة تشغيل Firefox. لست متأكدًا تمامًا مما يفعله مثال رد فعل dnd لفك ذلك ، أو كيفية عمل حل بديل له.

<html>
<head>
</head>
<body>
<p>
  Click and drag the draggable item for longer than 1 second to see it dragging.
  Click, drag, and release within 1 second to cause the error.
</p>

<div class="dropzone">
  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
    This div is draggable
  </div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>

<style>
  #draggable {
    width: 200px;
    height: 20px;
    text-align: center;
    background: white;
  }

  .dropzone {
    width: 200px;
    height: 20px;
    background: blueviolet;
    margin-bottom: 10px;
    padding: 10px;
  }
</style>

<script>
  var dragged;

  /* events fired on the draggable target */
  document.addEventListener("drag", function( event ) {
    console.log('drag')
  }, false);

  function sleep(ms){
      var waitTimeInMilliseconds = new Date().getTime() + ms;
      while(new Date().getTime() < waitTimeInMilliseconds ) true;
  }

  document.addEventListener("dragstart", function( event ) {
      // store a ref. on the dragged elem
      dragged = event.target;
      // make it half transparent
      event.target.style.opacity = .5;

      sleep(1000);

      // You can use this approach instead of the sleep. The image is quite
      // large so it's easy to release the mouse before the image is loaded
      // var img = new Image();
      // img.src = 'http://awakeningthegoddesswithin.net/wp/wp-content/uploads/2015/06/moon.jpg';
      // event.dataTransfer.setDragImage(img, 10, 10);
  }, false);

  document.addEventListener("dragend", function( event ) {
    console.log("dragend")
      // reset the transparency
      event.target.style.opacity = "";
  }, false);

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
      console.log("dragover")
      // prevent default to allow drop
      event.preventDefault();
  }, false);

  document.addEventListener("dragenter", function( event ) {
      console.log("dragenter")
      // highlight potential drop target when the draggable element enters it
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "purple";
      }

  }, false);

  document.addEventListener("dragleave", function( event ) {
      console.log("dragleave")
      // reset background of potential drop target when the draggable element leaves it
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
      }

  }, false);

  document.addEventListener("drop", function( event ) {
      console.log("drop")
      // prevent default action (open as link for some elements)
      event.preventDefault();
      // move dragged elem to the selected drop target
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
      }
  }, false);
</script>
</body>

jsteel في ٦ أبريل ٢٠١٨

تم فتح التذكرة باستخدام Mozilla هنا: https://bugzilla.mozilla.org/show_bug.cgi ؟id=1452131

jsteel في ٦ أبريل ٢٠١٨

👍3

أستطيع أن أؤكد هذا :(

deepj في ١٠ أبريل ٢٠١٨

👍1

تم تأكيد

darthtrevino في ١٩ أبريل ٢٠١٨

👍1

تم الالتزام بإصلاح Firefox ويجب إصداره مع Firefox 63 (الإصدار المخطط له في 2018-10-23)

renchap في ٣ أغسطس ٢٠١٨

تم وضع علامة على هذه المشكلة تلقائيًا على أنها قديمة نظرًا لعدم وجود نشاط حديث لها. سيتم إغلاقه إذا لم يحدث أي نشاط آخر. شكرا لمساهماتكم.

stale[bot] في ٦ يوليو ٢٠١٩

لا يزال هذا يحدث بالنسبة لي في كل من Fedora 30 و Windows 10 (Firefox 69). لقد أضفت هذه المعلومات أيضًا إلى بطاقة Firefox. منذ آخر تعليق على التذكرة قبل أن يقرأ لي:

يبدو أن المشكلة تحدث أيضًا فقط إذا تم طلب إعادة الرسم "في الموضوع الرئيسي".
عند التفاف إعادة الرسم في requestAnimationFrame () ، يعمل هذا كما هو متوقع.

هل هناك أي شيء يمكننا القيام به للتغلب على الخطأ في المكتبة؟

تعديل 09/19/2019:
يبدو أنه كان هناك تراجع في فايرفوكس 69 مع إعادة تقديم هذا الخطأ ، لقد قمت بتقديم تذكرة جديدة معهم: https://bugzilla.mozilla.org/show_bug.cgi؟id=1582401