<p dir="auto">Repro gist: <a href="https://gist.github.com/mkscrg/9adea6ea14464876460c">https://gist.github.com/mkscrg/9adea6ea14464876460c</a></p>
<p dir="auto">Calling <code class="notranslate">electron.ipcRenderer.sendSync()</code> within a <code class="notranslate">drop</code> event handler causes odd behavior with <code class="notranslate">dragEnd</code> event handlers.</p>
<p dir="auto">Given this code in a <code class="notranslate">BrowserWindow</code>:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;body&gt;
    &lt;script&gt;
window.allowDrop = function(e) {
  e.preventDefault();
};
window.drop = function() {
  console.log('DROP (1)');
  require('electron').ipcRenderer.sendSync('sync-message');
  console.log('DROP (2)');
};
window.dragEnd = function() {
  console.log('DRAG END (3)');
};
    &lt;/script&gt;
    &lt;div draggable=&quot;true&quot; ondragend=&quot;dragEnd(event)&quot; style=&quot;width: 50px; height: 50px; background: blue;&quot;&gt;&lt;/div&gt;
    &lt;div ondragover=&quot;allowDrop(event)&quot; ondrop=&quot;drop(event)&quot; style=&quot;width: 100px; height: 100px; margin-top: 50px; background: red;&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;"><pre class="notranslate"><span class="pl-c1">&lt;!DOCTYPE html<span class="pl-kos">&gt;</span></span>
<span class="pl-kos">&lt;</span><span class="pl-ent">html</span> <span class="pl-c1">lang</span>="<span class="pl-s">en</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
<span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-en">allowDrop</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-s1">e</span><span class="pl-kos">.</span><span class="pl-en">preventDefault</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-en">drop</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'DROP (1)'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'electron'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">ipcRenderer</span><span class="pl-kos">.</span><span class="pl-en">sendSync</span><span class="pl-kos">(</span><span class="pl-s">'sync-message'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'DROP (2)'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-en">dragEnd</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'DRAG END (3)'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">draggable</span>="<span class="pl-s">true</span>" <span class="pl-c1">ondragend</span>="<span class="pl-s">dragEnd(event)</span>" <span class="pl-c1">style</span>="<span class="pl-s">width: 50px; height: 50px; background: blue;</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">ondragover</span>="<span class="pl-s">allowDrop(event)</span>" <span class="pl-c1">ondrop</span>="<span class="pl-s">drop(event)</span>" <span class="pl-c1">style</span>="<span class="pl-s">width: 100px; height: 100px; margin-top: 50px; background: red;</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">html</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">When the blue box is dragged to the red box, the console shows:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="DROP (1)
DRAG END (3)
DROP (2)"><pre class="notranslate"><code class="notranslate">DROP (1)
DRAG END (3)
DROP (2)
</code></pre></div>
<p dir="auto">Workaround: avoid calling IPC in drag/drop event handlers.</p>
<p dir="auto">FWIW: this appeared for us as a bunch of React and ReactDnD invariant violations. We were calling <code class="notranslate">remote.getGlobal</code> from a React <code class="notranslate">render</code> method, and causing a re-render from a <code class="notranslate">drop</code> handler.</p>
<p dir="auto">I have an example repo here reproducing the issue in the smallest case I could come up with.</p>
<p dir="auto"><a href="https://github.com/aackerman/electron-setImmediate-test">https://github.com/aackerman/electron-setImmediate-test</a></p>
<p dir="auto">The gist is, when attempting to make a sync call in a 'renderer' process to a remote module in the 'browser' process, based on a reference from <code class="notranslate">remote.require</code>; the call doesn't block the <code class="notranslate">setImmediate</code> queue of tasks from being run. So the calls appear synchronous but don't completely block the run loop.</p>
<p dir="auto">Is this intended behavior? It really threw me when debugging an issue.</p>