From 5328ffb349a664303fcefeab3cef6999334171c6 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Thu, 4 Jan 2024 09:20:44 -0800
Subject: [PATCH] refactor sort() comparison function to be consistent across
 browsers (#7440)

Co-authored-by: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
---
 .../account-switcher.component.html            |  9 +++------
 .../services/account-switcher.service.ts       | 18 ++++++++++++++----
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/apps/browser/src/auth/popup/account-switching/account-switcher.component.html b/apps/browser/src/auth/popup/account-switching/account-switcher.component.html
index 5f9887833e..aebf2219ff 100644
--- a/apps/browser/src/auth/popup/account-switching/account-switcher.component.html
+++ b/apps/browser/src/auth/popup/account-switching/account-switcher.component.html
@@ -15,17 +15,14 @@
   <div class="tw-p-2">
     <div *ngIf="availableAccounts$ | async as availableAccounts">
       <ul class="tw-grid tw-list-none tw-gap-2" role="listbox">
-        <ng-container
-          *ngFor="let availableAccount of availableAccounts; first as isFirst"
-          role="option"
-        >
-          <li *ngIf="availableAccount.isActive" class="tw-mb-4">
+        <ng-container *ngFor="let availableAccount of availableAccounts; first as isFirst">
+          <li *ngIf="availableAccount.isActive" class="tw-mb-4" role="option">
             <auth-account [account]="availableAccount" (loading)="loading = $event"></auth-account>
           </li>
           <div *ngIf="isFirst" class="tw-uppercase tw-text-muted">
             {{ "availableAccounts" | i18n }}
           </div>
-          <li *ngIf="!availableAccount.isActive">
+          <li *ngIf="!availableAccount.isActive" role="option">
             <auth-account [account]="availableAccount" (loading)="loading = $event"></auth-account>
           </li>
         </ng-container>
diff --git a/apps/browser/src/auth/popup/account-switching/services/account-switcher.service.ts b/apps/browser/src/auth/popup/account-switching/services/account-switcher.service.ts
index 987361dc56..0b1015544c 100644
--- a/apps/browser/src/auth/popup/account-switching/services/account-switcher.service.ts
+++ b/apps/browser/src/auth/popup/account-switching/services/account-switcher.service.ts
@@ -82,15 +82,25 @@ export class AccountSwitcherService {
         }
 
         return options.sort((a, b) => {
-          // Active account is always first
+          /**
+           * Make sure the compare function is "well-formed" to account for browser inconsistencies.
+           *
+           * For specifics, see the sections "Description" and "Sorting with a non-well-formed comparator"
+           * on this page:
+           * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
+           */
+
+          // Active account (if one exists) is always first
           if (a.isActive) {
             return -1;
           }
 
-          // "Add Account" button is always last
-          if (a.id === this.SPECIAL_ADD_ACCOUNT_ID) {
-            return 1;
+          // If account "b" is the 'Add account' button, keep original order of "a" and "b"
+          if (b.id === this.SPECIAL_ADD_ACCOUNT_ID) {
+            return 0;
           }
+
+          return 1;
         });
       }),
     );