From 29902adedf6398dee1c9c6d5a7a9aef7d53a4bae Mon Sep 17 00:00:00 2001
From: Lex <lxstr@protonmail.com>
Date: Sun, 10 Dec 2023 14:07:56 +1000
Subject: [PATCH] Trigger copy on n_clicks change

---
 .../src/components/Clipboard.react.js         | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/components/dash-core-components/src/components/Clipboard.react.js b/components/dash-core-components/src/components/Clipboard.react.js
index 26b5ec729f..c7bf1a2592 100644
--- a/components/dash-core-components/src/components/Clipboard.react.js
+++ b/components/dash-core-components/src/components/Clipboard.react.js
@@ -17,6 +17,7 @@ export default class Clipboard extends React.Component {
     constructor(props) {
         super(props);
         this.copyToClipboard = this.copyToClipboard.bind(this);
+        this.onClickHandler = this.onClickHandler.bind(this);
         this.copySuccess = this.copySuccess.bind(this);
         this.getTargetText = this.getTargetText.bind(this);
         this.loading = this.loading.bind(this);
@@ -26,12 +27,19 @@ export default class Clipboard extends React.Component {
         };
     }
 
+    onClickHandler() {
+        this.props.setProps({n_clicks: this.props.n_clicks + 1});
+    }
+
     componentDidUpdate(prevProps) {
-        // If the data hasn't changed, do nothing.
-        if (!this.props.content || this.props.content === prevProps.content) {
+        // If the clicks has not changed, do nothing
+        if (
+            !this.props.n_clicks ||
+            this.props.n_clicks === prevProps.n_clicks
+        ) {
             return;
         }
-        // If the data has changed, copy to clipboard
+        // If the clicks has changed, copy to clipboard
         this.copyToClipboard();
     }
 
@@ -94,10 +102,6 @@ export default class Clipboard extends React.Component {
     }
 
     async copyToClipboard() {
-        this.props.setProps({
-            n_clicks: this.props.n_clicks + 1,
-        });
-
         let content;
         let htmlContent;
         if (this.props.target_id) {
@@ -131,7 +135,7 @@ export default class Clipboard extends React.Component {
                 title={title}
                 style={style}
                 className={className}
-                onClick={this.copyToClipboard}
+                onClick={this.onClickHandler}
                 data-dash-is-loading={
                     (loading_state && loading_state.is_loading) || undefined
                 }