Merge branch 'main' into 73-add-tankers-and-awacs-spawning

client/src/controls/dropdown.ts

@@ -24,6 +24,8 @@ export class Dropdown {
             this.#clip();
         });
 
+        this.#options.classList.add( "ol-scrollable" );
+
         // Commented out since it is a bit frustrating, particularly when the dropdown opens towards the top and not to the bottom
         //this.#element.addEventListener("mouseleave", ev => {
         //    this.#close();
@@ -53,6 +55,15 @@ export class Dropdown {
         }));
     }
 
+    selectText( text:string ) {
+
+        const index = [].slice.call( this.#options.children ).findIndex( ( opt:Element ) => opt.querySelector( "button" )?.innerText === text );
+        if ( index > -1 ) {
+            this.selectValue( index );
+        }
+
+    }
+
     selectValue(idx: number)
     {
         if (idx < this.#optionsList.length)

client/src/controls/mapcontextmenu.ts

@@ -169,7 +169,11 @@ export class MapContextMenu extends ContextMenu {
     #setGroundUnitRole(role: string) {
         this.#spawnOptions.role = role;
         this.#resetGroundUnitType();
-        this.#groundUnitTypeDropdown.setOptions(groundUnitsDatabase.getByRole(role).map((blueprint) => { return blueprint.label }));
+
+        const types = groundUnitsDatabase.getByRole(role).map((blueprint) => { return blueprint.label } );
+        types.sort();
+
+        this.#groundUnitTypeDropdown.setOptions( types );
         this.#groundUnitTypeDropdown.selectValue(0);
         this.clip();
     }
@@ -179,7 +183,11 @@ export class MapContextMenu extends ContextMenu {
         (<HTMLButtonElement>this.getContainer()?.querySelector("#loadout-list")).replaceChildren();
         this.#groundUnitRoleDropdown.reset();
         this.#groundUnitTypeDropdown.reset();
-        this.#groundUnitRoleDropdown.setOptions(groundUnitsDatabase.getRoles());
+
+        const roles = groundUnitsDatabase.getRoles();
+        roles.sort();
+        
+        this.#groundUnitRoleDropdown.setOptions( roles );
         this.clip();
     }