Controlled popover with buttons interfered by legacy behavior

[lxcid]

• components: Popover
• reactstrap version #7.1.0
• import method es
• react version #16.6.0
• bootstrap version #4.2.1

What is happening?

If I have controlled popover with its trigger set to legacy and try to add the dismiss button (that toggled the isOpen state), showWithDelay() get trigged by handleDocumentClick().

reactstrap/src/TooltipPopoverWrapper.js

Lines 195 to 206 in ee15c86

	handleDocumentClick(e) {
	const triggers = this.props.trigger.split(' ');
	if (triggers.indexOf('legacy') > -1 && (this.props.isOpen || isInDOMSubtree(e.target, this._target))) {
	if (this._hideTimeout) {
	this.clearHideTimeout();
	}
	if (this.props.isOpen && !isInDOMSubtree(e.target, this._popover)) {
	this.hideWithDelay(e);
	} else {
	this.showWithDelay(e);
	}

Because this is delayed, it get executed after we already manually toggled ourselves. e.preventDefault() or e.stopPropagation() doesn't work because useCapture is set to true thus overriding the normal event bubbling steps…

reactstrap/src/TooltipPopoverWrapper.js

Line 226 in ee15c86

document.addEventListener(event, this.handleDocumentClick, true)

This behavior cause the popover to get reopened.

What should be happening?

Legacy popover should work with controlled component with buttons in the popover body.

[lxcid]

My solution is to access the ref of TooltipPopoverWrapper and call clearShowTimeout().

It was inconvenience that we can't access TooltipPopoverWrapper ref from Popover (which just wrap it around)

I end up with something like this:

const Popover = React.forwardRef((props, ref) => {
  const { className, innerClassName } = props;
  const popperClasses = classNames('popover', 'show', className);

  const classes = classNames('popover-inner', innerClassName);

  return (
    <TooltipPopoverWrapper
      {...props}
      ref={ref}
      className={popperClasses}
      innerClassName={classes}
    />
  );
});

Note that the code only work for v7.1.0

[TheSharpieOne]

We should probably check if the popover is already open before setting the delay to open it.

[oneinchman]

In this commit I can see you address this. However, when I install the latest version (7.1.0) i still get the old code

I tried installing with reacstrap@7.10, reacstrap@next and reacstrap@latest. Still getting old code.
But when i download the zip-file i can see the new code.