fix(OverflowMenu): call closeMenu method only when menu is open

[emyarod]

Closes #5079

This PR adds an open state check to the handleClickOutside method so that the click listener correctly fires only when the menu is open.

Prior to this change, the click handler would fire with every click outside of the component regardless of the component state, meaning that for every overflow menu on a page, each click would trigger a handleClickOutside function call even if the menus were closed. As shown in the demo provided in the original ticket, this led to the action of opening a single overflow menu taking over 4 seconds on a page containing 500 menu instances.

With this check for menu state, the time taken for a single menu to open on the same demo is reduced to 19 milliseconds.

Changelog

Changed

• overflow menu handleClickOutside method

Testing / Reviewing

To test this locally, you can recreate the demo by adding this as a story in storybook and comparing it to the demo in the original ticket:

const Container = () => (
  <div>
    <OverflowMenu>
      <OverflowMenuItem itemText="item 1" />
      <OverflowMenuItem itemText="item 2" />
    </OverflowMenu>
  </div>
);

const containers = [];
for (let i = 0; i < 500; i++) {
  containers.push(<Container />);
}

return <div>{containers}</div>;

[netlify]

Deploy preview for carbon-elements ready!

Built with commit bb8930e

https://deploy-preview-5336--carbon-elements.netlify.com

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit bb8930e

https://deploy-preview-5336--carbon-components-react.netlify.com

[asudoh]

Simple fix that greatly improves the performance 🎉 - Thanks @emyarod!

[joshblack]

cc @vpicone

[vpicone]

Awesome work @emyarod thanks for tackling this. A big improvement!

[asudoh]

Got a green light from @emyarod to make this "ready to merge" state - Thanks @emyarod!

[tw15egan]

🎉