OverlayMask onClick error

[snide]

Looks like the portal PR #254 introduced a bug where onClick events can't be used on the overlay mask now. This broke some functionality (essentially the ability to click a flyout to close it).

Steps to replicate

1. Pull latest
2. Go to the flyout example. http://localhost:8030/#/flyout
3. Open the last example "Flyout sizing and focus"
4. Click the overlaymask that is generated. You'll get a console error of Uncaught SyntaxError: Unexpected token (

cc @nreese

[nreese]

    Object.keys(rest).forEach((key) => {
      this.overlayMaskNode.setAttribute(key, rest[key]);
    });

overlay_mask.js line 27 - setAttribute is the culprit. Setting the onClick as an attribute does not properly attach the event handler function.

Manually handling the onClick property gets things working but I am not sure this is the best solution. We will be playing wack-a-mole forever with each new attribute. Any ideas how to better add react props to a dom node?

  constructor(props) {
    super(props);

    const {
      className,
      children, // eslint-disable-line no-unused-vars
      onClick,
      ...rest
    } = this.props;

    this.overlayMaskNode = document.createElement('div');
    this.overlayMaskNode.className = classNames(
      'euiOverlayMask',
      className
    );
    if (onClick) {
      this.overlayMaskNode.onclick = onClick;
    }
    Object.keys(rest).forEach((key) => {
      this.overlayMaskNode.setAttribute(key, rest[key]);
    });
  }