ISSUE DESCRIPTION:
I am trying to use the lib to close a modal dialog whenever a click happens outside the modal(on backdrop), but the dialog itself has a ref for its main functionality.

SNIPPET:

QUESTION:
Is there any workaround to get this work for a node element that already has a ref (for the dialog in the given specific case) ?

Bug Report

Describe the Bug

During tests I keep getting this error, its because classList is undefined

Fix

from

if (el.classList.contains(ignoreClass)) return true;

to

if (el.classList && el.classList.contains(ignoreClass)) return true;

const formContainerRef = useOnclickOutside(
  (e) => {
	console.log('Clicked outside...', e)
	e.stopPropagation()
  },
  { disabled: disableOutsideClickHandler, excludeScrollbar: true }
)

e.stopPropagation() not working here. Also e.nativeEvent is undefined.
Please help. Thanks.

Bug Report

excludeScrollbar: true not working

Describe the Bug

I'm using the option excludeScrollbar: true, but still if I click on the scrollbar it execute useOnClickOutside

Expected Behavior

if I enable the option and I click on the scrollbar it should not execute the callback inside useOnClickOutside

Your Environment

• Device: [Lenovo ThinkPad]
• OS: [Ubuntu]
• Browser: [Chrome]
• Version: [96.0.4664.45]

Bug Report

Describe the Bug

v1.6.0 doesn't work with multiple refs
v1.5.9 works fine

How to Reproduce

Steps to reproduce the behavior:

1. Go to CodeSandbox demo
2. Click on "Open Dropdown" button
3. Click on the dropdown div (with red border) or "Click Here" button

Expected Behavior

It shouldn't trigger callback function.

Your Environment

• Device: PC
• OS: Windows
• Browser: Chrome
• Version: 89.0.4389.82 (Official Build) (64-bit)

Bug Report

Describe the Bug

With a new ref register in click outside (without pass refs in options), I got the types error.

A clear and concise description of what the bug is.

How to Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to '....'
2. Click on '....'
3. See error

Expected Behavior

Tell me what should happen.

Screenshots

Add screenshots to help explain your problem.

Your Environment

• OS: [e.g. macOS]
• Browser [e.g. Chrome, Safari]
• Version of react-cool-onclickoutside: v1.5.1

Additional Information

Any other information about the problem here.

Currently when clicking outside of an element, if you're clicking on an iframe element, this library will not detect that click. It would be nice if it did.

See the detectIFrame feature of https://www.npmjs.com/package/v-click-outside

Feature Request

Describe the Feature

Hello, thank you for this package. Can we add this functionality Ingore by class?

Additional Information

Prevent all events inside the ignored class

It would be great to support the case of having our component rendered inside a portal located in a new browser window.

With react portals, we can create a new browser window and render our components there. For example using react-new-window library (https://github.com/rmariuzzo/react-new-window).
I am using this in my application to being able of split my application in several small separated browser windows.

The problem here is that now the react-cool-onclickoutside library is always attaching the event listeners to the document, and when we are creating a new window and rendering our components there via portals, this premise is not valid.
So, in this new scenario, if you click outside the target component but inside your new window, that is not under the main document the listeners are not triggered.
I can try to provide a simple demo example to show you the use case if necessary.

What I propose is to have an optional parameter to pass a reference of the element that you want to use as root to attach the events (customRootRef or something like that) to be used instead of document.
This way it would be possible to pass a reference to the higher level component rendered in this new window. So if I click outside the target component but inside the window where this component is rendered, the react-cool-clickoutside ill accomplish its purpose.

We have bunch of components for popups, tooltips etc.
Simply where is no way to pass one specific class to all of them.
It would be nice to have ignoreClass as array.

Feature Request

ignore class should be able to ignore click events on children of the ignored class

Describe the Feature

Ignore class only ignores click events of the elements class passed in, I would love if I could be able to specify that all click events on the children of that element are also ignored

A clear and concise description of what you want and what your use case is.

I would love if I could be able to specify that all click events on the children of that element are also ignored, I have a popup on a map that makes use of this hook, when clicked it opens a sidebar drawer, whenever the user interacts with the drawer, the react onClickOutside get's triggered, which in turns closes the popup, and that's not the behaviour I want.
what I want is for the popup to stay open, even while the user interacts with the drawer and all its children.

https://www.npmjs.com/package/use-dismiss seems to have this feature (but misses others):

https://github.com/brandonpittman/use-dismiss/blob/master/src/useDismiss.js#L26-L40

I guess having an option (prop) so that not only on click outside but also when Esc is pressed to close would be good. For instance, dropboxes or modales - or would it be better to have this separate as in https://www.npmjs.com/package/@accessible/use-key or https://www.npmjs.com/package/use-key-hook ?

Feature Request

Describe the Feature

Make this hook compatible with react-popper making the refs option work also for HTMLElement and not just refs.

Describe the Solution You'd Like

Just pass in HTMLElement(s) like they were refs.

Describe Alternatives You've Considered

I didn't find any alternatives other than making my own hook from scratch, but I don't know how and I want to continue to use it in my projects also for this use case.

Additional Information

This may be helpful: https://github.com/Andarist/use-onclickoutside/pull/12/files

When using react-popper we should create refs using useState rather than useRef.
See this example:

function NotificationManager({user}) {
    const [notifications, notificationsDispatch] = useNotifications();
    const [showNotifications, setShowNotifications] = useState(false);
    const [referenceElement, setReferenceElement] = useState(null); //this is managed as a state, not a ref
    const [popperElement, setPopperElement] = useState(null); //this is managed as a state, not a ref
    const {styles, attributes} = usePopper(referenceElement, popperElement);
    useOnclickOutside(() => setShowNotifications(false), {
        refs: [referenceElement, popperElement] //I wish this could work
    })

    return (
        <>
            <div className="relative cursor-pointer" onClick={() => setShowNotifications(o => !o)} ref={setReferenceElement}>
                <UserAvatar user={user} bordered size={8}/>
            </div>

            {showNotifications &&
            <div className="notifications-menu" ref={setPopperElement} style={styles.popper} {...attributes.popper}>
                (notifications list)
            </div>
            }
        <>
    );
}