From 86c08e56ca7b2a0fdc8e2ff1afe95db1bf6d17a4 Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Sat, 7 Sep 2024 14:36:54 -0700
Subject: [PATCH] networks: Fix focusing on network interface field on error

- In create/edit network connection form, if the accordion is closed for
'General' section, Network Interface has not be selected yet and Submit button
is pressed, 'General' section should be expanded and focus should go to Network
Interface field. This is not working as expected as the code to expand
accordions didn't match 'select' type input fields properly. Fix this.

- Declare a common class name for both create and edit forms to make writing
queries easier.

- Drop console logs that where meant for debugging.

Tests:

- On both create and edit connection forms, set the value of network interface
to '--select--' and collapse the 'General' section. Press submit. The 'General'
section is expanded, Network Interface field is focus and scrolled into view.

- Do the same check for another field such as Connection Name and that works
too.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
---
 plinth/modules/networks/static/networks.js                | 4 +---
 plinth/modules/networks/templates/connections_create.html | 2 +-
 plinth/modules/networks/templates/connections_edit.html   | 2 +-
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/plinth/modules/networks/static/networks.js b/plinth/modules/networks/static/networks.js
index 14e7e1800..af2260051 100644
--- a/plinth/modules/networks/static/networks.js
+++ b/plinth/modules/networks/static/networks.js
@@ -103,7 +103,7 @@ jQuery(function($) {
 // collapsible so that the form element can be highlighted and an error tooltip
 // can be show by the browser.
 document.addEventListener('DOMContentLoaded', event => {
-    const selector = '.form-connection-edit input, .form-connection-create input';
+    const selector = '.form-connection input, .form-connection select';
     const input_elements = document.querySelectorAll(selector);
     input_elements.forEach(input =>
         input.addEventListener('invalid', on_invalid_event)
@@ -112,9 +112,7 @@ document.addEventListener('DOMContentLoaded', event => {
 
 function on_invalid_event(event) {
     const element = event.target;
-    console.log('Invalid event on element', element);
     const parent = element.closest('.collapse');
-    console.log('Invalid event with parent', parent);
     // Don't use .collapse(). Instead, expand all the sections with errors.
     parent.classList.add('show');
 }
diff --git a/plinth/modules/networks/templates/connections_create.html b/plinth/modules/networks/templates/connections_create.html
index d444340ad..6d8b5764c 100644
--- a/plinth/modules/networks/templates/connections_create.html
+++ b/plinth/modules/networks/templates/connections_create.html
@@ -9,7 +9,7 @@
 
   <h3>{{ title }}</h3>
 
-  <form class="form form-connection-create" method="post">
+  <form class="form form-connection form-connection-create" method="post">
     {% csrf_token %}
 
     {% include "connections_fields.html" %}
diff --git a/plinth/modules/networks/templates/connections_edit.html b/plinth/modules/networks/templates/connections_edit.html
index 8f95772a5..4a3725592 100644
--- a/plinth/modules/networks/templates/connections_edit.html
+++ b/plinth/modules/networks/templates/connections_edit.html
@@ -10,7 +10,7 @@
 
   <h3>{{ title }}</h3>
 
-  <form class="form form-connection-edit" method="post">
+  <form class="form form-connection form-connection-edit" method="post">
     {% csrf_token %}
 
     {% include "connections_fields.html" %}