[EuiFlyout] onClose invoked with unexpected parameter

[pickypg]

The definition for onClose as part of EuiFlyout is () => void. I was taking advantage of this by having my not-close button invoke the same method with an optional parameter.

However, I was surprised when certain closure's were triggering issues in my code. Upon inspection, it kind of became clear that I was receiving the events from the button clicks:

eui/src/components/flyout/flyout.tsx

Line 100 in 070acd1

onClick={onClose}

This is easy to workaround: just pass in the function as () => actualCallback(), but it was definitely unexpected.

[Dilshaad21]

@pickypg Can you please explain the issue or how can I reproduce this.

[pickypg]

Something along the lines of:

onComplete(data?: object) {
  if (data) {
    console.log('This also fires for certain uses of [onClose]');
  } else {
    console.log('As does this [onClose]');
  }
}

render() {
  return (
    <EuiFlyout
      onClose={this.onComplete}
      ownFocus
      // ...
    />
  );
}

When pressing the close button, it will pass the event data through to

[raghav4]

@pickypg can I work on this?

[raghav4]

Update:
@pickypg I tried reproducing whatever you've said, but couldn't encounter the issue, can you please elaborate it a little more?

[thompsongl]

We do need to makes some changes here.
Two choices:

• Keep () => void as the type and eliminate the event parameter coming from EuiButtonIcon
• Change to (Event) => void and pass the event parameter through in all cases.

The second option requires making to changes to EuiOverlayMask, so I'd likely opt for the first option.