Allow item pane sections to declare dependencies for rerender, fix Libraries and Collections not updating (#4155)

chrome/content/zotero/elements/itemBox.js

@@ -99,6 +99,10 @@
 			`, ['chrome://zotero/locale/zotero.dtd']);
 		}
 		
+		get _renderDependencies() {
+			return [...super._renderDependencies, this.collectionTreeRow?.id];
+		}
+		
 		init() {
 			this.initCollapsibleSection();
 			this._creatorTypeMenu.addEventListener('command', async (event) => {

chrome/content/zotero/elements/itemDetails.js

@@ -115,6 +115,14 @@
 		set tabType(tabType) {
 			this._tabType = tabType;
 		}
+		
+		get collectionTreeRow() {
+			return this._collectionTreeRow;
+		}
+		
+		set collectionTreeRow(collectionTreeRow) {
+			this._collectionTreeRow = collectionTreeRow;
+		}
 
 		get pinnedPane() {
 			return this.getAttribute('pinnedPane');
@@ -262,6 +270,7 @@
 				box.tabID = this.tabID;
 				box.tabType = this.tabType;
 				box.item = item;
+				box.collectionTreeRow = this.collectionTreeRow;
 				// Execute sync render immediately
 				if (!box.hidden && box.render) {
 					if (box.render) {

chrome/content/zotero/elements/itemPane.js

@@ -154,6 +154,7 @@
 			this._itemDetails.tabID = "zotero-pane";
 			this._itemDetails.tabType = "library";
 			this._itemDetails.item = item;
+			this._itemDetails.collectionTreeRow = this.collectionTreeRow;
 
 			if (this.hasAttribute("collapsed")) {
 				return true;

chrome/content/zotero/elements/itemPaneSection.js

@@ -59,6 +59,14 @@ class ItemPaneSectionElementBase extends XULElementBase {
 		this._tabType = tabType;
 		this.setAttribute('tabType', tabType);
 	}
+	
+	get collectionTreeRow() {
+		return this._collectionTreeRow;
+	}
+	
+	set collectionTreeRow(collectionTreeRow) {
+		this._collectionTreeRow = collectionTreeRow;
+	}
 
 	_syncRenderPending = false;
 
@@ -106,18 +114,24 @@ class ItemPaneSectionElementBase extends XULElementBase {
 		await this._forceRenderAll();
 	};
 
+	get _renderDependencies() {
+		return [this._tabID, this._item?.id];
+	}
+
 	/**
 	 * @param {"sync" | "async"} [type]
 	 * @returns {boolean}
 	 */
 	_isAlreadyRendered(type = "sync") {
-		let key = `_${type}RenderItemID`;
+		let key = `_${type}RenderDependencies`;
 		let pendingKey = `_${type}RenderPending`;
+		let itemIDKey = `_${type}RenderItemID`;
 
-		let renderFlag = this[key];
-		let pendingFlag = this[pendingKey];
+		let oldDependencies = this[key];
+		let newDependencies = this._renderDependencies;
 
-		let isRendered = renderFlag && this.item?.id == renderFlag;
+		let isPending = this[pendingKey];
+		let isRendered = Zotero.Utilities.arrayEquals(oldDependencies, newDependencies);
 		if (this.skipRender) {
 			if (!isRendered) {
 				this[pendingKey] = true;
@@ -126,17 +140,20 @@ class ItemPaneSectionElementBase extends XULElementBase {
 			return true;
 		}
 
-		if (!pendingFlag && renderFlag && this.item?.id == renderFlag) {
+		if (!isPending && isRendered) {
 			return true;
 		}
-		this[key] = this.item.id;
+		this[key] = newDependencies;
 		this[pendingKey] = false;
+		this[itemIDKey] = this.item?.id;
 		return false;
 	}
 
 	_resetRenderedFlags() {
 		// Clear cached flags to allow re-rendering
+		delete this._syncRenderDependencies;
 		delete this._syncRenderItemID;
+		delete this._asyncRenderDependencies;
 		delete this._asyncRenderItemID;
 	}
 

chrome/content/zotero/elements/librariesCollectionsBox.js

@@ -60,6 +60,10 @@ import { getCSSIcon } from 'components/icons';
 			this._linkedItems = [];
 		}
 
+		get _renderDependencies() {
+			return [...super._renderDependencies, this.collectionTreeRow?.id];
+		}
+
 		init() {
 			this._notifierID = Zotero.Notifier.registerObserver(this, ['item'], 'librariesCollectionsBox');
 			this._body = this.querySelector('.body');