From 3f88721bc1f36021a4a67bc788b50cf3fb071bd1 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 3 Jul 2018 14:43:27 +0100
Subject: [PATCH] Give PersistedElement a key

So there can be more than one on a page
---
 .../views/elements/PersistedElement.js          | 17 +++++++++++------
 src/components/views/rooms/Stickerpicker.js     |  2 +-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/views/elements/PersistedElement.js b/src/components/views/elements/PersistedElement.js
index 8115a36eeb..389a1458d2 100644
--- a/src/components/views/elements/PersistedElement.js
+++ b/src/components/views/elements/PersistedElement.js
@@ -16,19 +16,18 @@ limitations under the License.
 
 const React = require('react');
 const ReactDOM = require('react-dom');
+const PropTypes = require('prop-types');
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
 // of doing reusable widgets like dialog boxes & menus where we go and
 // pass in a custom control as the actual body.
 
-const ContainerId = "mx_PersistedElement";
-
-function getOrCreateContainer() {
-    let container = document.getElementById(ContainerId);
+function getOrCreateContainer(containerId) {
+    let container = document.getElementById(containerId);
 
     if (!container) {
         container = document.createElement("div");
-        container.id = ContainerId;
+        container.id = containerId;
         document.body.appendChild(container);
     }
 
@@ -106,9 +105,15 @@ export default class PersistedElement extends React.Component {
             {this.props.children}
         </div>;
 
-        ReactDOM.render(content, getOrCreateContainer());
+        ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey));
 
         return <div ref={this.collectChildContainer}></div>;
     }
 }
 
+PersistedElement.propTypes = {
+    // Unique identifier for this PersistedElement instance
+    // Any PersistedElements with the same persistKey will use
+    // the same DOM container.
+    persistKey: PropTypes.string.isRequired,
+};
diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js
index 4cb7c59ce6..343d04d24b 100644
--- a/src/components/views/rooms/Stickerpicker.js
+++ b/src/components/views/rooms/Stickerpicker.js
@@ -211,7 +211,7 @@ export default class Stickerpicker extends React.Component {
                             width: this.popoverWidth,
                         }}
                     >
-                    <PersistedElement>
+                    <PersistedElement persistKey="stickerPicker">
                         <AppTile
                             collectWidgetMessaging={this._collectWidgetMessaging}
                             id={stickerpickerWidget.id}