Baseweb: Popover does not close when you click outside the content

Created on 9 Apr 2020  路  6Comments  路  Source: uber/baseweb

For Popovers that utilize an open onClick, clicking outside the content does not close it.

https://codesandbox.io/s/popover-opens-on-click-u0ybm?file=/example.js

Current Behavior

Once the content is opened via onClick, the content does not close when you click outside of it.

Expected Behavior

Expected behavior should be similar to this: https://baseweb.design/components/popover/#popover-opens-on-click

Content should close when you click outside the content. Currently, it opens on click and closes on click only.

The prop dismissOnClickOutside doesn't work either.

Your Environment

| Tech | Version |
| ------- | ------- |
| Base UI | v9.67.2 |
| React | 16.13.0 |
| browser | chrome |

  • [x] I have searched the issues of this repository and believe that this is not a duplicate.
bug

Most helpful comment

Changing BaseProvider to esm import on codesandbox fixed it https://codesandbox.io/s/popover-opens-on-click-z8ze1?file=/index.js I wonder if codesandbox changed their module resolution? CC @tajo did you hear back about the bug you filed?

@sandgraham Yeah, I'm seeing it in my app.
Are you using the same versions of baseUI? Is the triggerType = click? The popover closes if triggerType is set to 'hover' (as opposed to 'click').
Also, dismissOnClickOutside didn't seem to work for me.

Please make sure you use BaseProvider in your application as it adds LayersManager that handles actions like clickOutside for the layers (Popover creates a new Layer internally).

Thank you @chasestarr and @nadiia. That fixed the issue! Will be closing this issue.

All 6 comments

@candycanetrain I think this is an issue with codesandbox. I tried it locally as well as in the popover sandbox on the doc site and the it works as expected. Are you seeing this issue in your app?

@sandgraham Yeah, I'm seeing it in my app.
Are you using the same versions of baseUI? Is the triggerType = click? The popover closes if triggerType is set to 'hover' (as opposed to 'click').

Also, dismissOnClickOutside didn't seem to work for me.

Changing BaseProvider to esm import on codesandbox fixed it https://codesandbox.io/s/popover-opens-on-click-z8ze1?file=/index.js I wonder if codesandbox changed their module resolution? CC @tajo did you hear back about the bug you filed?

@sandgraham Yeah, I'm seeing it in my app.
Are you using the same versions of baseUI? Is the triggerType = click? The popover closes if triggerType is set to 'hover' (as opposed to 'click').

Also, dismissOnClickOutside didn't seem to work for me.

Please make sure you use BaseProvider in your application as it adds LayersManager that handles actions like clickOutside for the layers (Popover creates a new Layer internally).

Please make sure you use BaseProvider in your application as it adds LayersManager that handles actions like clickOutside for the layers (Popover creates a new Layer internally).

馃憤

@chasestarr Oh no, this again. It seems that they did some es module resolution rewrite in January: https://github.com/codesandbox/codesandbox-client/pull/3370

Hard to tell when it was released or what it's doing. Welp, creating a ticket.

Changing BaseProvider to esm import on codesandbox fixed it https://codesandbox.io/s/popover-opens-on-click-z8ze1?file=/index.js I wonder if codesandbox changed their module resolution? CC @tajo did you hear back about the bug you filed?

@sandgraham Yeah, I'm seeing it in my app.
Are you using the same versions of baseUI? Is the triggerType = click? The popover closes if triggerType is set to 'hover' (as opposed to 'click').
Also, dismissOnClickOutside didn't seem to work for me.

Please make sure you use BaseProvider in your application as it adds LayersManager that handles actions like clickOutside for the layers (Popover creates a new Layer internally).

Thank you @chasestarr and @nadiia. That fixed the issue! Will be closing this issue.

Was this page helpful?
0 / 5 - 0 ratings