fix: #7791

public/language/en-GB/user.json

@@ -137,6 +137,7 @@
 	"follow_topics_you_create": "Watch topics you create",
 
 	"grouptitle": "Group Title",
+	"group-order-help": "Select a group and use the arrows to order titles",
 	"no-group-title": "No group title",
 
 	"select-skin": "Select a Skin",

public/src/client/account/edit.js

@@ -23,6 +23,7 @@ define('forum/account/edit', ['forum/account/header', 'translator', 'components'
 		handleEmailConfirm();
 		updateSignature();
 		updateAboutMe();
+		handleGroupSort();
 	};
 
 	function updateProfile() {
@@ -329,6 +330,28 @@ define('forum/account/edit', ['forum/account/header', 'translator', 'components'
 		});
 	}
 
+	function handleGroupSort() {
+		function move(direction) {
+			var selected = $('#groupTitle').val();
+			if (!ajaxify.data.allowMultipleBadges || (Array.isArray(selected) && selected.length > 1)) {
+				return;
+			}
+			var el = $('#groupTitle').find(':selected');
+			if (el.length && el.val()) {
+				if (direction > 0) {
+					el.insertAfter(el.next());
+				} else if (el.prev().val()) {
+					el.insertBefore(el.prev());
+				}
+			}
+		}
+		$('[component="group/order/up"]').on('click', function () {
+			move(-1);
+		});
+		$('[component="group/order/down"]').on('click', function () {
+			move(1);
+		});
+	}
 
 	return AccountEdit;
 });

src/controllers/accounts/edit.js

@@ -38,9 +38,21 @@ editController.get = async function (req, res, next) {
 	if (!userData.allowMultipleBadges) {
 		userData.groupTitle = userData.groupTitleArray[0];
 	}
+
+	userData.groups.sort((a, b) => {
+		const i1 = userData.groupTitleArray.indexOf(a.name);
+		const i2 = userData.groupTitleArray.indexOf(b.name);
+		if (i1 === -1) {
+			return 1;
+		} else if (i2 === -1) {
+			return -1;
+		}
+		return i1 - i2;
+	});
 	userData.groups.forEach(function (group) {
 		group.selected = userData.groupTitleArray.includes(group.name);
 	});
+	userData.groupSelectSize = Math.min(10, Math.max(5, userData.groups.length + 1));
 
 	userData.title = '[[pages:account/edit, ' + userData.username + ']]';
 	userData.breadcrumbs = helpers.buildBreadcrumbs([