Blueprint: [Popover] Popover closes erroneously when given a react-select child

[jrafidi]

Bug report

• __Package version(s)__: core 1.13.0
• __Browser and OS versions__: Chrome 56 OSX El Capitan

Steps to reproduce

1. Make a popover with PopoverInteractionKind.CLICK
2. Put a react-select dropdown in it
3. Click an option in the Select component

Actual behavior

Popover closes, even though the content of the react-select options is rendered within the popover.

Expected behavior

Popover stays open.

[jrafidi]

To make this more interesting: I occasionally see this work exactly once. After the first time working, all following attempts fail and close the popover immediately.

[sixinli]

this crash pretty badly with select2 too 😢

[sixinli]

versions:
blueprint core 1.13.0 (works in 1.0.0)
select2 3.5.x

error in console:
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

it does seem like the order of the dom nodes are different - the popover used to be rendered inside div.pt-portal span and now it renders to the top level (under body)

this was introduced in 1.3, potentially by this Fix portal/popover position and scrolling issues ?

[Que3216]

Getting this issue too

[nchen63]

@giladgray this bug is blocking us from upgrading beyond v1.2. Is it possible to bump the priority on this?

[adidahiya]

@sixinli @nchen63 is there anything useful in the full stack trace? that select2 error probably warrants a separate issue from this one

[giladgray]

👨‍⚕️ _boom diagnosed:_

e is the event from clicking on a react-select option inside a Popover, as handled by Overlay#handleDocumentClick, and it's coming from an element that _is no longer in the document._ this means it also isn't inside the overlay container, so canOutsideClickClose instructs the overlay to close itself.

an easy workaround is using PopoverInteractionKind.CLICK_TARGET_ONLY, which disables Overlay canOutsideClickClose.

<Popover content={<Select ... />} interactionKind={PopoverInteractionKind.CLICK_TARGET_ONLY}>

[giladgray]

Two potential fixes:

1. add that e.target.closest("body") check to Overlay#handleDocumentClick
2. expose canOutsideClickClose on Popover props

[giladgray]

A third potential fix: Blueprint's own Select from #1159 😱

[qcharlieshi]

Has there been a fix for this? I tried using popover2 to see if popperjs would solve these issues but no luck.

Having any type of input or popover that bleeds over the initial popover will cause it to close.

[cmslewis]

@qcharlieshi nope, no fix implemented yet.

[trivektor]

+1

[adidahiya]

This is an old issue, we recommend building select components using @blueprintjs/select. If you have specific problems please file a new issue and use the bug report template.