Essentials: 6.3.x breaks the browser HTML inspector usage

Describe the bug

With @storybook/addon-essentials v6.3.x (up to v6.3.1 for now), I can’t use the native HTML inspector of my browser (reproductible in Firefox and Chrome at least).

Using the contextual menu “inspect” option, or the inspector button at the top left of the dev tools, the result is always the same, it briefly selects the right element and then “goes back” to the <div id="root"> element.

To Reproduce

1. Install @storybook/addon-essentials@6.3.1
2. Enable it in the Storybook main configuration
3. Start Storybook
4. Go to any story
5. Right click on an element and select the “Inspect” menu item

The selected element in the HTML dev tool is always <div id="root">

System

Environment Info:

  System:
    OS: Linux 5.12 Fedora 34 (Workstation Edition) 34 (Workstation Edition)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
    Yarn: 2.4.2 - /usr/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.1/bin/npm
  Browsers:
    Firefox: 89.0.2
  npmPackages:
    @storybook/addon-essentials: 6.2.9 => 6.2.9 

[bummzack]

Can confirm that 6.3.2 also fixes the issue. Thanks a lot @shilman

[shilman]

Thanks for testing! I released the fix on 6.3.2 (or what I think is the fix). Closing this for now!