From bdc5f71990b42ed85bef807eadff154ea99e8c72 Mon Sep 17 00:00:00 2001
From: Tom Najdek <tom@doppnet.com>
Date: Thu, 4 Jan 2024 10:35:11 +0100
Subject: [PATCH] Fix unselectable tree item elements

The previous workaround to ensure the twisty animation plays caused an issue
where, in some cases, tree item entries became unselectable.

Instead of skipping the rendering of the entire row (when it has been marked as
just toggled), we are now forcing the toggle animation to play after the row has
been re-rendered.

Additionally, one case where the just-toggled state wasn't cleared was fixed.
---
 chrome/content/zotero/collectionTree.jsx | 20 +++++++++++---------
 chrome/content/zotero/itemTree.jsx       | 21 ++++++++++++---------
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/chrome/content/zotero/collectionTree.jsx b/chrome/content/zotero/collectionTree.jsx
index 42059aadce..a92e4eb84b 100644
--- a/chrome/content/zotero/collectionTree.jsx
+++ b/chrome/content/zotero/collectionTree.jsx
@@ -262,15 +262,6 @@ var CollectionTree = class CollectionTree extends LibraryTree {
 
 	renderItem = (index, selection, oldDiv, columns) => {
 		const treeRow = this.getRow(index);
-
-		// if marked as last toggled avoid re-rendering this row so that twisty animation can run
-		if (oldDiv && this._lastToggleOpenStateIndex === index) {
-			let oldTwisty = oldDiv.querySelector('.twisty');
-			if (oldTwisty) {
-				oldTwisty.classList.toggle('open', this.isContainerOpen(index));
-				return oldDiv;
-			}
-		}
 		
 		// Div creation and content
 		let div = oldDiv || document.createElement('div');
@@ -409,6 +400,17 @@ var CollectionTree = class CollectionTree extends LibraryTree {
 			}
 		}
 
+		// since row has been re-rendered, if it has been toggled open/close, we need to force twisty animation
+		if (this._lastToggleOpenStateIndex === index) {
+			let twisty = div.querySelector('.twisty');
+			if (twisty) {
+				twisty.classList.toggle('open', !this.isContainerOpen(index));
+				setTimeout(() => {
+					twisty.classList.toggle('open', this.isContainerOpen(index));
+				}, 0);
+			}
+		}
+
 		return div;
 	}
 	
diff --git a/chrome/content/zotero/itemTree.jsx b/chrome/content/zotero/itemTree.jsx
index 3793e6a110..243cdc6aa7 100644
--- a/chrome/content/zotero/itemTree.jsx
+++ b/chrome/content/zotero/itemTree.jsx
@@ -1618,8 +1618,8 @@ var ItemTree = class ItemTree extends LibraryTree {
 			await this._refreshPromise;
 			this._restoreSelection(savedSelection, false, true);
 			this.tree.invalidate();
-			this._lastToggleOpenStateIndex = null;
 		}
+		this._lastToggleOpenStateIndex = null;
 	}
 
 	expandMatchParents(searchParentIDs) {
@@ -2875,14 +2875,6 @@ var ItemTree = class ItemTree extends LibraryTree {
 	_renderItem(index, selection, oldDiv=null, columns) {
 		let div;
 		if (oldDiv) {
-			// if marked as last toggled avoid re-rendering this row so that twisty animation can run
-			if (this._lastToggleOpenStateIndex === index) {
-				let oldTwisty = oldDiv.querySelector('.twisty');
-				if (oldTwisty) {
-					oldTwisty.classList.toggle('open', this.isContainerOpen(index));
-					return oldDiv;
-				}
-			}
 			div = oldDiv;
 			div.innerHTML = "";
 		}
@@ -2947,6 +2939,17 @@ var ItemTree = class ItemTree extends LibraryTree {
 			div.setAttribute('aria-disabled', true);
 		}
 
+		// since row has been re-rendered, if it has been toggled open/close, we need to force twisty animation
+		if (this._lastToggleOpenStateIndex === index) {
+			let twisty = div.querySelector('.twisty');
+			if (twisty) {
+				twisty.classList.toggle('open', !this.isContainerOpen(index));
+				setTimeout(() => {
+					twisty.classList.toggle('open', this.isContainerOpen(index));
+				}, 0);
+			}
+		}
+
 		return div;
 	};