Discard old sticker picker when the URL changes

Fixes element-hq/element-web#7547

src/components/views/rooms/Stickerpicker.js

@@ -25,13 +25,17 @@ import dis from '../../../dispatcher';
 import AccessibleButton from '../elements/AccessibleButton';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
+import PersistedElement from "../elements/PersistedElement";
 
 const widgetType = 'm.stickerpicker';
 
 // We sit in a context menu, so the persisted element container needs to float
 // above it, so it needs a greater z-index than the ContextMenu
 const STICKERPICKER_Z_INDEX = 5000;
 
+// Key to store the widget's AppTile under in PersistedElement
+const PERSISTED_ELEMENT_KEY = "stickerPicker";
+
 export default class Stickerpicker extends React.Component {
     constructor(props) {
         super(props);
@@ -126,6 +130,23 @@ export default class Stickerpicker extends React.Component {
 
     _updateWidget() {
         const stickerpickerWidget = WidgetUtils.getStickerpickerWidgets()[0];
+
+        const currentWidget = this.state.stickerpickerWidget;
+        let currentUrl = null;
+        if (currentWidget && currentWidget.content && currentWidget.content.url) {
+            currentUrl = currentWidget.content.url;
+        }
+
+        let newUrl = null;
+        if (stickerpickerWidget && stickerpickerWidget.content && stickerpickerWidget.content.url) {
+            newUrl = stickerpickerWidget.content.url;
+        }
+
+        if (newUrl !== currentUrl) {
+            // Destroy the existing frame so a new one can be created
+            PersistedElement.destroyElement(PERSISTED_ELEMENT_KEY);
+        }
+
         this.setState({
             stickerpickerWidget,
             widgetId: stickerpickerWidget ? stickerpickerWidget.id : null,
@@ -211,7 +232,7 @@ export default class Stickerpicker extends React.Component {
                             width: this.popoverWidth,
                         }}
                     >
-                    <PersistedElement persistKey="stickerPicker" style={{zIndex: STICKERPICKER_Z_INDEX}}>
+                    <PersistedElement persistKey={PERSISTED_ELEMENT_KEY} style={{zIndex: STICKERPICKER_Z_INDEX}}>
                         <AppTile
                             id={stickerpickerWidget.id}
                             url={stickerpickerWidget.content.url}