Select, ButtonDropdown dropdowns don't react to click outside when placed in Modal

[rihardsgravis]

Bug report 🐞

Select, ButtonDropdown components don't close on click outside when placed in a Modal component.

Version & Environment

• Version of browser: Chrome 89.0.4389.114
• Version of geist-ui/react: 2.1.4

Expected Behaviour

Select, ButtonDropdown dropdown menus should close when user clicks inside the modal window area.

Actual results (or Errors)

The dropdown menus stay open. Reproduction example - https://codesandbox.io/s/crimson-architecture-9p391

[rihardsgravis]

Looks like the Backdrop component's childrenClickHandler causes this by preventing the click event at: https://github.com/geist-org/react/blob/18c1afbc14d8d7ba7c6352d6a0084211d29d6f07/components/shared/backdrop.tsx#L30

Removing the event.stopPropagation()resolves the issue and the Backdrop continues to work as expected, at least for the Modal component. I could create a PR, but not sure of the side effects 😅

[unix]

I tried the online example and click on the blank part of the Modal is able to make the Select close up, am I missing anything?

[rihardsgravis]

I tried the online example and click on the blank part of the Modal is able to make the Select close up, am I missing anything?

Ah, could not understand why it's working on CodeSandbox and not for me locally 😅 The bug is actually reproducible with React v17 - https://codesandbox.io/s/determined-poincare-085kw

[unix]

I see. It seems that this is caused by the event system upgrade of react17. I will add a compatible one to fix it.