<p dir="auto">Hi guys. I'm getting really weird behavior in my latest project. I assume it's a bug in React.<br>
I want to override default browser context menu. I subscribed for <code class="notranslate">contextmenu</code> and <code class="notranslate">click</code> events in <code class="notranslate">componentDidMount</code>. On right click (context menu) I want to show my custom div. On left click, this div should hide. In event listeners I do:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="onContextMenu = (e) =&gt; {
	if ((e.target as any).id === CONTEXT_MENU_ID) {
		const {offsetX, offsetY} = e
		const contextMenu = {
			isActive: true,
			position: {
				x: offsetX,
				y: offsetY,
			},
		}
		this.setState({contextMenu})
		e.preventDefault()
	}
}

onClick = (e) =&gt; {
	const contextMenu = {
		isActive: false,
		position: {x: 0, y: 0},
	}
	this.setState({contextMenu})
}"><pre class="notranslate"><code class="notranslate">onContextMenu = (e) =&gt; {
	if ((e.target as any).id === CONTEXT_MENU_ID) {
		const {offsetX, offsetY} = e
		const contextMenu = {
			isActive: true,
			position: {
				x: offsetX,
				y: offsetY,
			},
		}
		this.setState({contextMenu})
		e.preventDefault()
	}
}

onClick = (e) =&gt; {
	const contextMenu = {
		isActive: false,
		position: {x: 0, y: 0},
	}
	this.setState({contextMenu})
}
</code></pre></div>
<p dir="auto">and in <code class="notranslate">render</code> there's:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{(this.state.contextMenu.isActive) &amp;&amp; (
	&lt;div className='menu-item noselect'&gt;
		&lt;i className='fa fa-plus'/&gt;
		&lt;span&gt; Add new note &lt;/span&gt;
	&lt;/div&gt;
)}"><pre class="notranslate"><code class="notranslate">{(this.state.contextMenu.isActive) &amp;&amp; (
	&lt;div className='menu-item noselect'&gt;
		&lt;i className='fa fa-plus'/&gt;
		&lt;span&gt; Add new note &lt;/span&gt;
	&lt;/div&gt;
)}
</code></pre></div>
<p dir="auto">I assume everybody can imagine expected behavior. But real behavior is:<br>
right click &gt; context menu shows up &gt; left click &gt; context menu is still there &gt; right click &gt; another context menu shows up... and so on... You can literally see DOM nodes being duplicated in Elements tab in DevTools</p>
<p dir="auto">You can try it here: <a href="https://github.com/jake-daniels/zen-tab">https://github.com/jake-daniels/zen-tab</a><br>
The code is in <code class="notranslate">src/app/controller/NotesBoard.tsx</code> file.<br>
Try <code class="notranslate">npm install</code> <code class="notranslate">npm start</code>, then right/left click somewhere on blue area.</p>
<p dir="auto">Environment:<br>
MS Windows 8.1 x64<br>
Chrome 63.0.3239.84<br>
React 16.2.0</p>
<p dir="auto">I'd like to configure my testsuite to fail if there are any react warnings triggered.</p>
<p dir="auto">I'm currently using a variant on this SO answer <a href="http://stackoverflow.com/questions/29651950/karma-and-react-have-warnings-to-cause-errors" rel="nofollow">http://stackoverflow.com/questions/29651950/karma-and-react-have-warnings-to-cause-errors</a></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="console.warn = (function(warn) {
  return function(msg) {

    // Detect react warnings &amp; error
    if (/^Warning: /.test(msg)) {
      throw new Error(&quot;React &quot; + msg);
    }

    return warn.apply(this, arguments);
  };
})(console.warn);"><pre class="notranslate"><span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-c1">warn</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">warn</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">msg</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

    <span class="pl-c">// Detect react warnings &amp; error</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">^</span>Warning: <span class="pl-c1">/</span></span><span class="pl-kos">.</span><span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s1">msg</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">throw</span> <span class="pl-k">new</span> <span class="pl-v">Error</span><span class="pl-kos">(</span><span class="pl-s">"React "</span> <span class="pl-c1">+</span> <span class="pl-s1">msg</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">return</span> <span class="pl-s1">warn</span><span class="pl-kos">.</span><span class="pl-en">apply</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">,</span> <span class="pl-smi">arguments</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-kos">)</span><span class="pl-kos">(</span><span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-c1">warn</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This basically works, but has a problem because there's some global-state memoisation in the code which triggers warning to try not to trigger too often:<br>
</p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/facebook/react/blob/500d4c3f8779bce7c7dde129eb2fec9e901cf5ae/src/isomorphic/classic/element/ReactElementValidator.js#L46">react/src/isomorphic/classic/element/ReactElementValidator.js</a>
    </p>
    <p class="mb-0 color-fg-muted">
         Line 46
      in
      <a data-pjax="true" class="commit-tease-sha" href="/facebook/react/commit/500d4c3f8779bce7c7dde129eb2fec9e901cf5ae">500d4c3</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L46" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="46"></td>
          <td id="LC46" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-k">var</span> <span class="pl-s1">ownerHasKeyUseWarning</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span> </td>
        </tr>
    </tbody></table>
  </div>
</div>
<p></p>
<p dir="auto">Could we provide a way to clear this state, or even better a supported API for opt-in erroring on warnings?</p>