From cb53c6eb2e7cf33152637e8d745ad76e178e8bd7 Mon Sep 17 00:00:00 2001
From: abaevbog <bogdan@zotero.org>
Date: Tue, 11 Mar 2025 21:48:40 -0700
Subject: [PATCH] citation dialog: fix IO race condition on load (#5097)

IOManager relies on everything being loaded, so it
should be initialized last. Otherwise, any IO handler
trying to access currentLayout would throw an error.

Also, swap the order of operations in bubble-input to
set input width only after the first input is added.
Otherwise, first input will have an arbitrary width
during initial load.

https://forums.zotero.org/discussion/122554/beta-new-insertion-bar-problem-with-citations-but-not-notes
---
 chrome/content/zotero/elements/bubbleInput.js       | 10 +++++-----
 chrome/content/zotero/integration/citationDialog.js | 10 ++++++----
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/chrome/content/zotero/elements/bubbleInput.js b/chrome/content/zotero/elements/bubbleInput.js
index 616a1d5bc1..8173a591a3 100644
--- a/chrome/content/zotero/elements/bubbleInput.js
+++ b/chrome/content/zotero/elements/bubbleInput.js
@@ -100,16 +100,16 @@
 					bubble.classList.toggle("has-item-selected", !!itemObj.selected);
 				}
 			}
-			// Make sure that all inputs occupy the right width
-			for (let input of [...this.querySelectorAll(".input")]) {
-				let requiredWidth = Utils.getContentWidth(input);
-				input.style.width = `${requiredWidth}px`;
-			}
 			// Prepend first input
 			if (!this._body.firstChild || !Utils.isInput(this._body.firstChild)) {
 				let input = this._createInputElem();
 				this._body.prepend(input);
 			}
+			// Make sure that all inputs occupy the right width
+			for (let input of [...this.querySelectorAll(".input")]) {
+				let requiredWidth = Utils.getContentWidth(input);
+				input.style.width = `${requiredWidth}px`;
+			}
 			// Add placeholder and a special aria-description to the first input when there are no bubbles
 			let isOnlyInput = this.getAllBubbles().length == 0;
 			this._body.firstChild.classList.toggle("full-width", isOnlyInput);
diff --git a/chrome/content/zotero/integration/citationDialog.js b/chrome/content/zotero/integration/citationDialog.js
index 0af8bb34f9..f84af232a1 100644
--- a/chrome/content/zotero/integration/citationDialog.js
+++ b/chrome/content/zotero/integration/citationDialog.js
@@ -74,9 +74,6 @@ async function onLoad() {
 	// keypress from the top-most row in the items table
 	doc.addEventListener("keydown", event => KeyboardHandler.captureKeydown(event), true);
 
-	// handling of user's IO
-	IOManager.init();
-
 	// Move dialog towards the center (it's needed even though we open the dialog with centerscreen param)
 	let targetX = Math.floor((window.screen.width - window.outerWidth) / 2);
 	let targetY = window.screen.height / 3;
@@ -93,8 +90,13 @@ async function onLoad() {
 	// fetch opened/selected/cited items so they are known
 	// before refreshing items list after dialog mode setting
 	await SearchHandler.refreshNonLibraryItems();
-	// set initial dialog mode when everything is loaded
+	// some nodes (e.g. item-tree-menu-bar) are expected to be present to switch modes
+	// so this has to go after all layouts are loaded
 	IOManager.setInitialDialogMode();
+	// most of IO handling relies on currentLayout being defined so it must follow setInitialDialogMode
+	IOManager.init();
+	// explicitly focus bubble input so one can begin typing right away
+	_id("bubble-input").refocusInput();
 
 	// Disabled all multiselect when citing notes
 	if (isCitingNotes) {