Fix join channel form not working

Fixes #2329

client/js/join-channel.js

@@ -48,7 +48,7 @@ function openForm(network) {
 }
 
 sidebar.on("click", ".add-channel", function(e) {
-	const id = $(e.target).data("id");
+	const id = $(e.target).closest(".lobby").data("id");
 	const joinForm = $(`#join-channel-${id}`);
 	const network = joinForm.closest(".network");
 
@@ -61,30 +61,36 @@ sidebar.on("click", ".add-channel", function(e) {
 	return false;
 });
 
-sidebar.on("submit", ".join-form", function() {
-	const form = $(this);
-	const channel = form.find("input[name='channel']");
-	const channelString = channel.val();
-	const key = form.find("input[name='key']");
-	const keyString = key.val();
-	const chan = utils.findCurrentNetworkChan(channelString);
+function handleKeybinds(networks) {
+	for (const network of networks) {
+		const form = $(`.network[data-uuid="${network.uuid}"] .join-form`);
 
-	if (chan.length) {
-		chan.trigger("click");
+		form.find("input,  button").each(function() {
+			Mousetrap(this).bind("esc", () => {
+				closeForm(form.closest(".network"));
+
+				return false;
+			});
+		});
+
+		form.on("submit", () => {
+			const networkElement = form.closest(".network");
+			const channel = form.find("input[name='channel']").val();
+			const key = form.find("input[name='key']").val();
+			const existingChannel = utils.findCurrentNetworkChan(channel);
+
+			if (existingChannel.length) {
+				existingChannel.trigger("click");
 			} else {
 				socket.emit("input", {
-			text: `/join ${channelString} ${keyString}`,
-			target: form.prev().data("id"),
+					text: `/join ${channel} ${key}`,
+					target: networkElement.find(".lobby").data("id"),
 				});
 			}
 
-	closeForm(form.closest(".network"));
-	return false;
-});
+			closeForm(networkElement);
 
-function handleKeybinds() {
-	sidebar.find(".join-form input, .join-form button").each(function() {
-		const network = $(this).closest(".network");
-		Mousetrap(this).bind("esc", () => closeForm(network));
+			return false;
 		});
+	}
 }

client/js/lounge.js

@@ -164,7 +164,7 @@ $(function() {
 		const target = self.attr("data-target");
 
 		if (!target) {
-			return false;
+			return;
 		}
 
 		// This is a rather gross hack to account for sources that are in the

client/js/render.js

@@ -210,7 +210,7 @@ function renderNetworks(data, singleNetwork) {
 	});
 
 	// Add keyboard handlers to the "Join a channel…" form inputs/button
-	JoinChannel.handleKeybinds();
+	JoinChannel.handleKeybinds(data.networks);
 
 	let newChannels;
 	const channels = $.map(data.networks, function(n) {

client/views/chan.tpl

@@ -23,7 +23,7 @@
 			<span class="badge{{#if highlight}} highlight{{/if}}">{{#if unread}}{{roundBadgeNumber unread}}{{/if}}</span>
 		</div>
 		<span class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch" aria-label="Join a channel…" data-alt-label="Cancel">
-			<button class="add-channel" aria-label="Join a channel…" data-id="{{id}}"></button>
+			<button class="add-channel" aria-label="Join a channel…" aria-controls="join-channel-{{id}}"></button>
 		</span>
 	{{/equal}}
 	{{#notEqual type "lobby"}}

client/views/join_channel.tpl

@@ -1,5 +1,5 @@
 <form id="join-channel-{{id}}" class="join-form" method="post" action="" autocomplete="off">
 	<input type="text" class="input" name="channel" placeholder="Channel" pattern="[^\s]+" maxlength="200" title="The channel name may not contain spaces" required>
 	<input type="password" class="input" name="key" placeholder="Password (optional)" pattern="[^\s]+" maxlength="200" title="The channel password may not contain spaces" autocomplete="new-password">
-	<button type="submit" class="btn btn-small" data-id="{{id}}">Join</button>
+	<button type="submit" class="btn btn-small">Join</button>
 </form>