Let mobile form declare if/how to auto-focus a field

and for mobile ordering, auto-focus the "units" field when editing a row

tailbone/forms/core.py

@@ -330,7 +330,7 @@ class Form(object):
 
     def __init__(self, fields=None, schema=None, request=None, mobile=False, readonly=False, readonly_fields=[],
                  model_instance=None, model_class=None, nodes={}, enums={}, labels={}, renderers=None,
-                 hidden={}, widgets={}, defaults={}, validators={}, required={}, helptext={},
+                 hidden={}, widgets={}, defaults={}, validators={}, required={}, helptext={}, focus_spec=None,
                  action_url=None, cancel_url=None):
 
         self.fields = None
@@ -362,6 +362,7 @@ class Form(object):
         self.validators = validators or {}
         self.required = required or {}
         self.helptext = helptext or {}
+        self.focus_spec = focus_spec
         self.action_url = action_url
         self.cancel_url = cancel_url
 
@@ -717,6 +718,8 @@ class Form(object):
         # TODO: deprecate / remove the latter option here
         if self.auto_disable_save or self.auto_disable:
             context['form_kwargs']['class_'] = 'autodisable'
+        if self.focus_spec:
+            context['form_kwargs']['data-focus'] = self.focus_spec
         context['request'] = self.request
         context['readonly_fields'] = self.readonly_fields
         context['render_field_readonly'] = self.render_field_readonly

tailbone/static/js/tailbone.mobile.js

@@ -50,7 +50,8 @@ $(document).on('autocompleteitemselected', function(event, uuid) {
 
 /**
  * Automatically set focus to certain fields, on various pages
- * TODO: this should accept selector params instead of hard-coding..?
+ * TODO: should be letting the form declare a "focus spec" instead, to avoid
+ * hard-coding these field names below!
  */
 function setfocus() {
     var el = null;
@@ -73,6 +74,21 @@ $(document).on('pageshow', function() {
 
     setfocus();
 
+    // if current page has form, which has declared a "focus spec", then try to
+    // set focus accordingly
+    var form = $('.ui-page-active form');
+    if (form) {
+        var spec = form.data('focus');
+        if (spec) {
+            var input = $(spec);
+            if (input) {
+                if (input.is(':visible')) {
+                    input.focus();
+                }
+            }
+        }
+    }
+
 });
 
 

tailbone/templates/mobile/master/edit_row.mako

@@ -5,15 +5,7 @@
 
 <%def name="page_title()">${h.link_to(index_title, index_url)} &raquo; ${h.link_to(parent_title, parent_url)} &raquo; ${h.link_to(instance_title, instance_url)} &raquo; Edit</%def>
 
-## TODO: this should not be necessary, correct?
-## <%def name="buttons()">
-##   <br />
-##   ${h.submit('create', form.update_label)}
-##   ${h.link_to("Cancel", form.cancel_url, class_='ui-btn ui-corner-all')}
-## </%def>
-
 <div class="form-wrapper">
-##  ${form.render(buttons=capture(self.buttons))|n}
   ${form.render()|n}
 </div><!-- form-wrapper -->
 

tailbone/views/purchasing/ordering.py

@@ -321,6 +321,12 @@ class OrderingBatchView(PurchasingBatchView):
         data['mode_title'] = self.enum.PURCHASE_BATCH_MODE[mode].capitalize()
         return self.render_to_response('create', data, mobile=True)
 
+    def configure_mobile_row_form(self, f):
+        super(OrderingBatchView, self).configure_mobile_row_form(f)
+        if self.editing:
+            # TODO: probably should take `allow_cases` into account here...
+            f.focus_spec = '[name="units_ordered"]'
+
     def download_excel(self):
         """
         Download ordering batch as Excel spreadsheet.