From 46fbe156650eba98f89a9d082d627e6ad08234e9 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@nodebb.org>
Date: Wed, 30 Mar 2022 16:46:08 -0400
Subject: [PATCH] fix: #10443, regression where sorted-list items did not
 render into the DOM in the predicted order [breaking]

---
 public/src/admin/settings/api.js           |  4 ++--
 public/src/modules/settings/sorted-list.js | 21 +++++++++++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/public/src/admin/settings/api.js b/public/src/admin/settings/api.js
index a994d885a6..cc0e0e8c70 100644
--- a/public/src/admin/settings/api.js
+++ b/public/src/admin/settings/api.js
@@ -1,13 +1,13 @@
 'use strict';
 
-define('admin/settings/api', ['settings', 'alerts'], function (settings, alerts) {
+define('admin/settings/api', ['settings', 'alerts', 'hooks'], function (settings, alerts, hooks) {
 	const ACP = {};
 
 	ACP.init = function () {
 		settings.load('core.api', $('.core-api-settings'));
 		$('#save').on('click', saveSettings);
 
-		$(window).on('action:settings.sorted-list.loaded', (ev, { element }) => {
+		hooks.on('action:settings.sorted-list.itemLoaded', (ev, { element }) => {
 			element.addEventListener('click', (ev) => {
 				if (ev.target.closest('input[readonly]')) {
 					// Select entire input text
diff --git a/public/src/modules/settings/sorted-list.js b/public/src/modules/settings/sorted-list.js
index 42b5c72085..241a60cae7 100644
--- a/public/src/modules/settings/sorted-list.js
+++ b/public/src/modules/settings/sorted-list.js
@@ -50,7 +50,7 @@ define('settings/sorted-list', [
 			const list = ajaxify.data[call ? hash : 'settings'][key];
 
 			if (Array.isArray(list) && typeof list[0] !== 'string') {
-				await Promise.all(list.map(async (item) => {
+				const items = await Promise.all(list.map(async (item) => {
 					({ item } = await hooks.fire('filter:settings.sorted-list.loadItem', { item }));
 
 					const itemUUID = utils.generateUUID();
@@ -59,10 +59,23 @@ define('settings/sorted-list', [
 					form.attr('data-sorted-list-object', key);
 					$('#content').append(form.hide());
 
-					parse($container, itemUUID, item).then(() => {
-						hooks.fire('action:settings.sorted-list.loaded', { element: listEl.get(0) });
-					});
+					return { itemUUID, item };
 				}));
+
+				// todo: parse() needs to be refactored to return the html, so multiple calls can be parallelized
+				// eslint-disable-next-line no-restricted-syntax
+				for (const { itemUUID, item } of items) {
+					// eslint-disable-next-line no-await-in-loop
+					await parse($container, itemUUID, item);
+					hooks.fire('action:settings.sorted-list.itemLoaded', { element: listEl.get(0) });
+				}
+
+				hooks.fire('action:settings.sortd-list.loaded', {
+					containerEl: $container.get(0),
+					listEl: listEl.get(0),
+					hash,
+					key,
+				});
 			}
 
 			listEl.sortable().addClass('pointer');