Sort related items by title

Closes #4281

chrome/content/zotero/elements/relatedBox.js

@@ -87,16 +87,34 @@ import { getCSSItemTypeIcon } from 'components/icons';
 
 			if (this._item) {
 				let relatedKeys = this._item.relatedItems;
-				for (let i = 0; i < relatedKeys.length; i++) {
-					let key = relatedKeys[i];
-					let relatedItem = Zotero.Items.getByLibraryAndKey(
-						this._item.libraryID, key
-					);
-					if (!relatedItem) {
+				
+				let relatedItems = relatedKeys.map((key) => {
+					let item = Zotero.Items.getByLibraryAndKey(this._item.libraryID, key);
+					if (!item) {
 						Zotero.debug(`Related item ${this._item.libraryID}/${key} not found `
 							+ `for item ${this._item.libraryKey}`, 2);
-						continue;
 					}
+					return item;
+				});
+				
+				// Sort by display title
+				var collation = Zotero.getLocaleCollation();
+				var titles = new Map();
+				function getTitle(item) {
+					var title = titles.get(item.id);
+					if (title === undefined) {
+						title = Zotero.Items.getSortTitle(item.getDisplayTitle());
+						titles.set(item.id, title);
+					}
+					return title;
+				}
+				relatedItems.sort((a, b) => {
+					var titleA = getTitle(a);
+					var titleB = getTitle(b);
+					return collation.compareString(1, titleA, titleB);
+				});
+				
+				for (let relatedItem of relatedItems) {
 					let id = relatedItem.id;
 
 					let row = document.createElement('div');

test/tests/relatedboxTest.js

@@ -12,6 +12,48 @@ describe("Related Box", function () {
 		win.close();
 	})
 	
+	async function relateItems(...items) {
+		for (let i = 0; i < items.length; i++) {
+			for (let j = i + 1; j < items.length; j++) {
+				items[i].addRelatedItem(items[j]);
+				items[j].addRelatedItem(items[i]);
+			}
+		}
+		for (let item of items) {
+			await item.saveTx();
+		}
+	}
+	
+	it("should sort by title", async function () {
+		var title1 = 'cccccc';
+		var title2 = 'aaaaaa';
+		var title3 = 'bbbbbb';
+		var item0 = await createDataObject('item');
+		var item1 = await createDataObject('item', { title: title1 });
+		var item2 = await createDataObject('item', { title: title2 });
+		var item3 = await createDataObject('item', { title: title3 });
+		
+		await relateItems(item0, item1, item2, item3);
+		
+		await win.ZoteroPane.selectItem(item0.id);
+		
+		var relatedbox = doc.getElementById('zotero-editpane-related');
+		
+		// Wait for relations list to populate
+		do {
+			await Zotero.Promise.delay(50);
+		}
+		while (!relatedbox.querySelectorAll('.row').length);
+		
+		var html = relatedbox.querySelector('.body').innerHTML;
+		var pos1 = html.indexOf(title1);
+		var pos2 = html.indexOf(title2);
+		var pos3 = html.indexOf(title3);
+		assert.isAbove(pos2, 0);
+		assert.isAbove(pos3, pos2)
+		assert.isAbove(pos1, pos3)
+	});
+	
 	it("should update if a related item is renamed", async function () {
 		var title1 = 'aaaaaa';
 		var title2 = 'bbbbbb';