Eui: Flyout generates two EuiOverlayMask when ownFocus is enabled

[weiklr]

Hi,

I'm using the latest version (23.2.0) of elastic UI and was trying the "Small Flyout, own Focus" demo in my own dev environment.

When I click the button, i realize the overlay mask stays on even though the drawer has closed.

On inspecting the browser console, i realize there's two EuiOverLayMask component created when the drawer is open. When the drawer is closed, there's still one remaining in the DOM, causing the issue.

[chandlerprall]

I'm unable to reproduce a double overlay on https://elastic.github.io/eui/#/layout/flyout (which currently uses v23.2.0). Can you provide the steps you're taking to navigate to and toggle that flyout?

[weiklr]

I simply copied the code from the "Small Flyout, Own Focus" demo to its own jsx file, and run it like it's described in the demo.

[weiklr]

I realize this is because of React's component in App.js. This comes with every react app that's created with CRA. If i remove it, the flyout works as intended.

Btw, I was on development mode when i tried this, but it doesn't seemed to affect production build based on Reactjs' docs. Seems like react team did it on purpose to highlight side effects in improper life cycle methods and constructors.

More details here:
https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

[chandlerprall]

Ahh, now I understand what's going on. Yep, that's a problem. I confirmed moving the overlay's document.body.appendChild(this.overlayMaskNode); from its constructor and into the did mount life cycle fixes this particular issue.

We should enable strict mode in our docs, work on identifying other existing places like this, and fix. /cc @thompsongl for visibility

[periabyte]

This also happens with the new EuiCollapsibleNav

I also removed the <React.StrictMode> tags to fix this

[DavidGOrtega]

Hi, Im suffering also this issue not in a flyout but always. This is the minimum setup where I can see both divs created always staying one after the state change.

function App() {
  const closeReleaseNumberModal = () => setIsReleaseNumberModalVisible(false);
  const showReleaseNumberModal = () => setIsReleaseNumberModalVisible(true);
  const [isReleaseNumberModalVisible, setIsReleaseNumberModalVisible] = useState(false);

  const render_release_number_modal = () => {
    if (isReleaseNumberModalVisible) {
      return (
        <EuiOverlayMask>
          <EuiConfirmModal
            title="You&rsquo;re about to release a number"
            onCancel={closeReleaseNumberModal}
            onConfirm={closeReleaseNumberModal}
            cancelButtonText="No, don't do it"
            confirmButtonText="Yes, do it"
            buttonColor="danger"
            defaultFocusedButton="confirm">
            <p>Are you sure you want to do this?</p>
          </EuiConfirmModal>
        </EuiOverlayMask>
      );
    }
  }
return (
 <Fragment>
      {render_release_number_modal()}
</Fragment>

)
}

export default App;

after close the modal