diff --git a/src/sandbox.js b/src/sandbox.js index 33b1a920..009c5014 100644 --- a/src/sandbox.js +++ b/src/sandbox.js @@ -16,6 +16,7 @@ const state = { settings: { testIdAttribute: 'data-testid', }, + pointerInside: false, }; function postMessage(action) { @@ -106,12 +107,16 @@ function Sandbox() {
{ + state.pointerInside = true; state.highlighter?.clear(); state.highlighter?.start({ stopOnClick: false, blockEvents: false }); }} onMouseLeave={() => { state.highlighter?.stop(); state.highlighter.highlight({ nodes: state.queriedNodes }); + state.pointerInside = false; + + postMessage({ type: 'HOVER_NODE', payload: null }); }} > @@ -120,7 +125,11 @@ function Sandbox() { } function onSelectNode(node, { origin }) { - if (!origin || origin === 'script') { + // onSelectNode can be triggered after onMouseLeave has already been called. + // This makes it impossible to clear hover state. That's why we maintain and + // check a boolean to see if the pointer is inside the sandbox, before + // dispatching events. + if (!origin || origin === 'script' || !state.pointerInside) { return; }