React-bootstrap-typeahead: `toggleMenu` not working with react-dom 17

[alex84G]

In want to fire the toggleMenu() method from a button.
There is an example of how to fire the public methods: https://ericgio.github.io/react-bootstrap-typeahead/#public-methods
But the toggleMenu() method is not working. In this stackoverflow answer someone mentioned, that the public methods are not listed in the type definitions.

Sandbox: https://codesandbox.io/s/purple-sunset-dhikf?fontsize=14&hidenavigation=1&theme=dark

Expected Behavior

toggleMenu() should open the dropdown.

Actual Behavior

toggleMenu() is not fired.

[ericgio]

Hi @alex84G, thanks for your question. Unfortunately, it's hard for me to help without additional information. Please follow the issue template and include a thorough description of your problem. Code examples or sandboxes are extremely helpful as well. Thank you!

[alex84G]

Hi @alex84G, thanks for your question. Unfortunately, it's hard for me to help without additional information. Please follow the issue template and include a thorough description of your problem. Code examples or sandboxes are extremely helpful as well. Thank you!

Hi @ericgio, I've updated my issue and added a sandbox.

[ericgio]

@alex84G: Thanks for providing the sandbox. The problem appears to be related to react-dom v17. Downgrading the version to 16.x solves the issue. Using react v17 doesn't seem to be a problem. I'll need to look into why this is happening.

Edit: It looks like the event handling has changed such that the RootClose component gets called after toggleMenu, so the menu opens and closes immediately.

[ericgio]

As a workaround, you can stop the event propagation in your click handler:

<button
  onClick={(event) => {
    event.stopPropagation();
    ref.current.toggleMenu();
  }}>
  Open
</button>

[ericgio]

Turns out this was related to an issue with react-overlays. Upgrading to the latest version seems to have solved the problem.