ooade / react-click-away-listener Goto Github PK

The react-click-away-listener fires the following memory leak FYI.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
Header@webpack-internal:///./components/modules/Header.tsx:24:74
div
Default@webpack-internal:///./components/layouts/Default/Default.tsx:22:18

overrideMethod react_devtools_backend.js:2557
    React 5
    handleClickAway Header.tsx:18
    handleEvents ClickAwayListener.tsx:92
    (Async: EventListener.handleEvent)
    ClickAwayListener ClickAwayListener.tsx:95

It's implemented as below:

<ClickAwayListener onClickAway={handleClickAway}>
  <button type="button" 
    onClick={() => {
      setOpenProfile(!openProfile);
    }}>
      <span>See Profile</span>
    </button>
</ClickAwayListener>

Hi Again!

v1.1.0 does not appear to be passing the event to the onClickAway function. I copied the source to my application and it seems to be fine. I'm wondering if perhaps there was an issue with the build process. I do have the updates types!

Would you be able to take a look into this?

We should make onClick the default mouse event, and onTouchEnd the default touch event.

Currently the click away listener doesn't have a class name and adds a naked element. There should be a classname before props are spread to indicate in dev tools that this naked element is actually the click away listener. Since props are spread any classname that is provided will override it. This will just help clarify what this naked element is when no classname prop is provided.

I've updated from React 16.14.0 to React 17.0.2 and now it seems like click event listener component triggers whenever it's mounted. This made a component i created no longer work.

Can you check this?

Describe the bug

1. When I click a button, the website will show me a list. And it uses react-click-away-listener.
2. I want to choose one clickable element by my Tab key.
3. Ok. Now I choose it - a child of the list.
4. Oh no. The list get the click-away event and close itself - and its children.

To Reproduce
👀

Expected behavior
I hope if I try to focus the children, (even click the children), it will never get the click-away event.

Screenshots
👀

Desktop (please complete the following information):

• OS: Manjaro
• Browser Firefox
• Version 99.0.1

Smartphone (please complete the following information):
👀

Additional context
I try to use focusEvent="none" to disable. It works now. But not good.

When we "add react-click-away-listener" to some element on page and have some iframe on this page, after click on iframe - listener doesn't triggered.

When I click on these items, the popup is closed, but it shouldn't be. For example if I click on the embed code copy button then the menu should remain open.

<ClickAwayListener onClickAway={() => mapDetailsOpen && setMapDetailsOpen(false)}>
  <div></div>
</ClickAwayListener/>

Using the latest pre-react 17 version that I could find, 1.4.4.

Do you have any plans for supporting portals?

Building a custom select dropdown with ClickAwayListener wrapping the component.

Right now the structure looks something like this

<form onSubmit={e => e.preventDefault()}>
       <ClickAwayListener>
               <button onClick={e => e.preventDefault()}> test </button>
       </ClickAwayListener>
       <button type='submit'>submit</button>
</form>

Describe the bug

In #59 a change has been introduced that changes peerDependencies of react and react-dom to only allow versions ^18.0.0. This introduced a breaking change by dropping support for React 17.

I suggest setting peerDependencies to ^17.0.0 || ^18.0.0 to fix a breaking change.

And actually, while we're at it, it looks like your code should run perfectly in ^16.8.0 as well. So perhaps even set it to ^16.8.0 || ^17.0.0 || ^18.0.0?

Is there a way to add a flag that also right click events should trigger the clickAway handler?

does not work with react 18 ?

Describe the bug
A clear and concise description of what the bug is.
the bug is some error appear in console when you add touchEvent

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] windows
• Browser [e.g. chrome, safari] chrome
• Version [e.g. 22] 100

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Currently, children are wrapped around div. We should be able to specify the element to wrap the children. I have submitted a PR if you think this is valid

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. switch tab
2. back to current tab
3. onClickAway triggerd

Expected behavior
onClickAway not trigger

Chrome

Currently the Mouse/Touch Event that is fired from clicking away is not passed to the function passed for onClickAway.

I feel this should be changed so that you could prevent event bubbling by using event.preventDefault or to do other stuff with the event.

I can submit a PR if you wish.