Multiple Typeaheads not Closing Other Typeaheads (React 17)

[dleavitt]

Version

react-bootstrap-typeahead 5.2.1 (6.0.0-alpha.8 also affected)
react 17.0.1
react-dom 17.0.1

Steps to reproduce

Go here: https://codesandbox.io/s/rbt-multi-not-closing-forked-ppj01

• Click on the bottom (third) typeahead
• Click on the middle (second) typeahead

Expected Behavior

The third typeahead should close.

Actual Behavior

The third typeahead stays open, obscuring the second.

Behaves as expects when:

• Using React 16.x
• Opening a typeahead where multiple={false}
• Clicking anywhere else on the page.

[ericgio]

Hi @dleavitt, thanks for the report! I can confirm the behavior you describe, and it looks like the bug is happening with v6 of this library as well. The problem most likely has something to do with changes to event delegation in React 17 but I'll need to dig a little deeper.

[ericgio]

The bug is happening because TypeaheadInputMulti relies on e.stopPropagation for some of its behaviors. Prior to v17, stopPropagation would still bubble up to listeners on the document, and the typeahead relied on that to achieve the desired menu behavior. With React 17, stopPropagation works as expected and truly stops the event from bubbling up, so the click is no longer registered and the menu doesn't close, as you've observed.

More specifically, stopPropagation is being called by tokens and the input element; you'll notice that clicking on the edge of the container produces the expected result.

[ericgio]

Fixed in v5.2.2 and v6.0.0-alpha.9

[dleavitt]

thanks so much + appreciate the explanation!