[Kimchi-devel] [PATCH] Put focus on form's first field

[Crístian Viana]

A good usability practice is to leave the focus on the first editable
field on a form. That way, the user can start typing immediately what
they want without having to use the mouse to click on the
input element.

Explicitely request focus to every form's first field. Some input
elements did not have an ID; in those cases, the IDs were also added
to the HTML code.

Signed-off-by: Crístian Viana <vianac at linux.vnet.ibm.com>
---
 ui/js/src/kimchi.guest_add_main.js       | 1 +
 ui/js/src/kimchi.guest_edit_main.js      | 1 +
 ui/js/src/kimchi.report_add_main.js      | 1 +
 ui/js/src/kimchi.repository_add_main.js  | 1 +
 ui/js/src/kimchi.repository_edit_main.js | 1 +
 ui/js/src/kimchi.storagepool_add_main.js | 1 +
 ui/js/src/kimchi.template_edit_main.js   | 2 ++
 ui/pages/guest-add.html.tmpl             | 2 +-
 ui/pages/repository-add.html.tmpl        | 2 +-
 9 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/ui/js/src/kimchi.guest_add_main.js b/ui/js/src/kimchi.guest_add_main.js
index 2113099..0a4f5e6 100644
--- a/ui/js/src/kimchi.guest_add_main.js
+++ b/ui/js/src/kimchi.guest_add_main.js
@@ -77,6 +77,7 @@ kimchi.guest_add_main = function() {
 
     $('#form-vm-add').on('submit', addGuest);
     $('#vm-doAdd').on('click', addGuest);
+    $('#guest-add-id-textbox').focus();
 
     showTemplates();
 };
diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js
index 0236e2d..3588dcc 100644
--- a/ui/js/src/kimchi.guest_edit_main.js
+++ b/ui/js/src/kimchi.guest_edit_main.js
@@ -225,4 +225,5 @@ kimchi.guest_edit_main = function() {
 
     $(guestEditForm).on('submit', submitForm);
     $(saveButton).on('click', submitForm);
+    $('#guest-edit-id-textbox').focus();
 };
diff --git a/ui/js/src/kimchi.report_add_main.js b/ui/js/src/kimchi.report_add_main.js
index 8759c2b..f7f1b4b 100644
--- a/ui/js/src/kimchi.report_add_main.js
+++ b/ui/js/src/kimchi.report_add_main.js
@@ -43,4 +43,5 @@ kimchi.report_add_main = function() {
 
     addReportForm.on('submit', submitForm);
     submitButton.on('click', submitForm);
+    nameTextbox.focus();
 };
diff --git a/ui/js/src/kimchi.repository_add_main.js b/ui/js/src/kimchi.repository_add_main.js
index 5dc84e5..4ee7a62 100644
--- a/ui/js/src/kimchi.repository_add_main.js
+++ b/ui/js/src/kimchi.repository_add_main.js
@@ -97,4 +97,5 @@ kimchi.repository_add_main = function() {
     };
 
     $(addForm).on('submit', addRepository);
+    $('#repo_id').focus();
 };
diff --git a/ui/js/src/kimchi.repository_edit_main.js b/ui/js/src/kimchi.repository_edit_main.js
index 26d6c66..0b562ee 100644
--- a/ui/js/src/kimchi.repository_edit_main.js
+++ b/ui/js/src/kimchi.repository_edit_main.js
@@ -72,4 +72,5 @@ kimchi.repository_edit_main = function() {
 
     $(editForm).on('submit', editRepository);
     $(saveButton).on('click', editRepository);
+    $('#repository-edit-name-textbox').focus();
 };
diff --git a/ui/js/src/kimchi.storagepool_add_main.js b/ui/js/src/kimchi.storagepool_add_main.js
index 86dbe7f..d37a37d 100644
--- a/ui/js/src/kimchi.storagepool_add_main.js
+++ b/ui/js/src/kimchi.storagepool_add_main.js
@@ -20,6 +20,7 @@ kimchi.storagepool_add_main = function() {
     kimchi.initStorageAddPage();
     $('#form-pool-add').on('submit', kimchi.addPool);
     $('#pool-doAdd').on('click', kimchi.addPool);
+    $('#poolId').focus();
 };
 
 kimchi.initStorageAddPage = function() {
diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js
index f0f4718..a0e9e28 100644
--- a/ui/js/src/kimchi.template_edit_main.js
+++ b/ui/js/src/kimchi.template_edit_main.js
@@ -177,4 +177,6 @@ kimchi.template_edit_main = function() {
             kimchi.message.error(err.responseJSON.reason);
         });
     });
+
+    $('#template-edit-id-textbox').focus();
 };
diff --git a/ui/pages/guest-add.html.tmpl b/ui/pages/guest-add.html.tmpl
index 84a1994..e478b2e 100644
--- a/ui/pages/guest-add.html.tmpl
+++ b/ui/pages/guest-add.html.tmpl
@@ -37,7 +37,7 @@
                 <p class="text-help">
                     $_("The name used to identify the virtual machine. If omitted, a name will be chosen based on the template used.")
                 </p>
-                <input type="text" class="text" style="width: 300px" name="name">
+                <input type="text" class="text" style="width: 300px" name="name" id="guest-add-id-textbox">
             </div>
         </section>
         <section class="form-section">
diff --git a/ui/pages/repository-add.html.tmpl b/ui/pages/repository-add.html.tmpl
index 05b4de9..9a8a037 100644
--- a/ui/pages/repository-add.html.tmpl
+++ b/ui/pages/repository-add.html.tmpl
@@ -39,7 +39,7 @@
                             $_("Single word, unique identifier for the repository.")
                         </p>
                         <div class="textbox-wrapper">
-                            <input type="text" class="text" name="repo_id" />
+                            <input type="text" class="text" name="repo_id" id="repo_id" />
                         </div>
                     </div>
                 </div>
-- 
1.9.0