Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create useClickedOutside hook #157

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

leroykorterink
Copy link
Collaborator

No description provided.

@leroykorterink leroykorterink added the enhancement New feature or request label May 15, 2023
@leroykorterink leroykorterink self-assigned this May 15, 2023
@leroykorterink leroykorterink changed the title Update useMediaQuery documentation #128 Create useClickedOutside hook May 16, 2023

const onClick = useCallback(
(event: Event) => {
// Using element bounds because a click on a shadow element (e.g. dialog backdrop) is also
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using this way to check this would return "Inside" if you click on an element that could cover the entire element, so you're not really click the element? I don't think this is what you want.

Copy link
Member

@ThaNarie ThaNarie May 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess you need to do both then.

  1. check if it's inside the expected bounds
  2. check if the clicked target is a child of the element

Could you (@leroykorterink) clarify why a backdrop would not influence the element bounding rect?

Also, both variations should have either a story or a test, currently the "backdrop" case doesn't have either?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants