musiclist should render as a listbox now instead of a dropdown

depends on the device, desktop browsers usually do that automatically

3 files changed, 9 insertions, 1 deletions

diff --git a/webAO/client.css b/webAO/client.css
index 3e99262..9dadaa7 100644
--- a/webAO/client.css
+++ b/webAO/client.css
@@ -307,6 +307,7 @@ img {
 
 #client_musiclist {
 	width: 99%;
+	height: 100%;
 	background-color: #222;
 	color: white;
 }
diff --git a/webAO/client.html b/webAO/client.html
index c4b3725..e004101 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -291,7 +291,7 @@
 
 <template id="music">
 	<meta name="frame-title" lang="en" content="Music">
-	<select id="client_musiclist" size="5" onclick="musiclist_click(event)" style="width: 100%; height: 100%;">
+	<select id="client_musiclist" size="5" onclick="musiclist_click(event)" multiple>
 	</select>
 </template>
 
diff --git a/webAO/client.js b/webAO/client.js
index b06283b..a653ef3 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -1356,6 +1356,13 @@ function resetICParams() {
 export function musiclist_click(_event) {
 	const playtrack = document.getElementById("client_musiclist").value;
 	client.sendMusicChange(playtrack);
+
+	// This is here so you can't actually select multiple tracks,
+	// even though the select tag has the multiple option to render differently
+	let musiclist_elements = document.getElementById("client_musiclist").selectedOptions;
+    for(let i = 0; i < musiclist_elements.length; i++){
+      musiclist_elements[i].selected = false;
+    }
 }
 window.musiclist_click = musiclist_click;