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.

Sign up for GitHub

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

Jump to bottom

Compatibility Issues Between "React" and "React-OnClickOutside" Libraries #396

Merged
merged 2 commits into from
May 10, 2024
Merged

Compatibility Issues Between "React" and "React-OnClickOutside" Libraries #396

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5192ee4
Update index.js
OrMeirchak May 9, 2023
16d57f1
Merge pull request #1 from OrMeirchak/event-validation
OrMeirchak May 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export default function onClickOutsideHOC(WrappedComponent, config) {
constructor(props) {
super(props);
this._uid = uid();
this.initTimeStamp = performance.now();
}

/**
Expand Down Expand Up @@ -163,6 +164,8 @@ export default function onClickOutsideHOC(WrappedComponent, config) {

handlersMap[this._uid] = event => {
if (this.componentNode === null) return;

if (this.initTimeStamp > event.timeStamp) return;
Copy link
Owner

Choose a reason for hiding this comment

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

Hmm, this feels like it's fixing a race condition. This function should not be able to trigger before the constructor runs, so while this might fix the symptom it's probably better to track down the underlying cause. Thanks to it being a long weekend here in Canada, I should hopefully have time today to dig into this a little.

Copy link

Choose a reason for hiding this comment

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

Was there any better solution discussed for this?

Copy link
Owner

@Pomax Pomax May 9, 2024 •
edited

Choose a reason for hiding this comment

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

I guess the counter question would be that modern React, having gone all-in on hooks (whether we like it or not) kind of... removed the need for this hoc. So as a sincere question: does anyone still need this fixed, rather than just updating to the current version of React and useEffecting outside-click handling?

Copy link

Choose a reason for hiding this comment

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

We are working on an oldcodebase where its not feasible to migrate to hooks easily, So it would be great if we can fix a solution for the issue.

Copy link
Owner

Choose a reason for hiding this comment

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

Hooks are over 5 years old at this point, I would strongly encourage you to consider getting on board with modern Reactg if you want to keep using it (understanding full well that's almost certainly not your call to make).

I'll merge this in, but given React's trajectory, this will be a bandaid at best.

Copy link
Owner

Choose a reason for hiding this comment

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

Also, if this HoC is that important to your codebase, consider taking the first paragraph of the README to heart and giving back any way you can.


if (this.props.preventDefault) {
event.preventDefault();
Expand Down