Ignore element

[rushenn]

Hi,

Thank you for this cool component. It would be so nice if you can implement an option to ignore certain elements when clicking outside.

Regards.

[captbaritone]

A nice way to implement this might be to allow the user to specify a filter function which gets passed the event. Then the user can check for classes, node types or compare with actual references to known nodes.

[boblauer]

That's a good suggestion. What do you think about this approach?

excludeClickedOutElement(event) {
  return hasClass(event.target, 'exclude-me');
}

render() {
  <OnClickOut exclude={this.excludeClickedOutElement} ...>
}

I'm thinking exclude instead of filter so that you can return true to ignore the element, where as the term filter could be kind of confusing here (am I keeping elements I want to ignore, or filtering them out?)

Thoughts?

[captbaritone]

Maybe ignoreEvents?

[ianstormtaylor]

Hey @boblauer, btw thanks for the great clean and simple lib.

Since we already have access to the event in onClickOut, so why not just put the logic there? That would keep it just as streamlined as it currently is:

onClickOut = (e) => {
  if (hasClass(event.target, 'exclude-me')) return
  ...
}

I might be missing something!

[boblauer]

@ianstormtaylor Are you saying to not modify this library at all, and simply suggest that if someone needs to ignore a certain element, they can do so within their own handler function?

[ianstormtaylor]

@boblauer yup, just to keep things simple.

[boblauer]

Yeah, that's a great idea. I'll update the README to include a section on that. Thanks for the suggestion.