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

fix(ClipboardCopy): clear timer on unmount #6708

Merged
merged 1 commit into from
Jan 4, 2022
Merged

fix(ClipboardCopy): clear timer on unmount #6708

merged 1 commit into from
Jan 4, 2022

Conversation

boaz0
Copy link
Member

@boaz0 boaz0 commented Dec 20, 2021

What: Closes #6649

Signed-off-by: Boaz Shuster <boaz.shuster.github@gmail.com>
@patternfly-build
Copy link
Contributor

@@ -111,6 +111,12 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
}
};

componentWillUnmount = () => {
if (this.timer) {
window.clearTimeout(this.timer);
Copy link
Contributor

Choose a reason for hiding this comment

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

Great catch!
Does this mean that the this.timer = null; on line 204 and 357 is unnecessary?

Copy link
Member Author

Choose a reason for hiding this comment

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

@nicolethoen that's a great question.
These lines were meant for a different case:

  1. If the user clicked on the copy button we set a timer that on timeout we will close the "copied" popover
  2. but what happens if the user clicks again on the copy button and the timer didn't timeout. A new timer will be created unnecessarily and we will have a flaky behavior in the popover display (it will be closed after switchDelay from the first click).
  3. So what we did is check if there is a timer. Stop it and release it from the memory. and run a new timer.

In other words, these lines are necessary for a behavior of the popover and not covering the case where the component is unmounted and after the timeout we are changing the component state (we "cannot" change its state because it's not mounted!).

I hope I explained that well.
Thank you for the question - it was fun. 😄

Copy link
Contributor

Choose a reason for hiding this comment

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

Fabulous explanation! Thank you so much!

Copy link
Contributor

@tlabaj tlabaj left a comment

Choose a reason for hiding this comment

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

LGTM

@tlabaj tlabaj merged commit 8485dfd into patternfly:main Jan 4, 2022
@boaz0 boaz0 deleted the closes_6649 branch January 4, 2022 17:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

"React state update on an unmounted component" message being triggered after copying text
5 participants