Add autofocus support for input.html templates (encode#4650)

jamesbeith · tomchristie · commit befacfb00d4c · 2016-11-07T11:34:53.000Z
This change adds support to use `'autofocus': True` in the style options and have the `autofocus` attribute included on the input field when rendered.
diff --git a/docs/topics/html-and-forms.md b/docs/topics/html-and-forms.md
@@ -108,7 +108,7 @@ Let's take a look at how to render each of the three available template packs. F
     class LoginSerializer(serializers.Serializer):
         email = serializers.EmailField(
             max_length=100,
-            style={'placeholder': 'Email'}
+            style={'placeholder': 'Email', 'autofocus': True}
         )
         password = serializers.CharField(
             max_length=100,
@@ -207,9 +207,9 @@ Field templates can also use additional style properties, depending on their typ
 
 The complete list of `base_template` options and their associated style options is listed below.
 
-base_template  | Valid field types  | Additional style options     
+base_template  | Valid field types  | Additional style options
 ----|----|----
-input.html     | Any string, numeric or date/time field | input_type, placeholder, hide_label
+input.html     | Any string, numeric or date/time field | input_type, placeholder, hide_label, autofocus
 textarea.html |  `CharField` | rows, placeholder, hide_label
 select.html | `ChoiceField` or relational field types | hide_label
 radio.html | `ChoiceField` or relational field types | inline, hide_label
diff --git a/rest_framework/templates/rest_framework/horizontal/input.html b/rest_framework/templates/rest_framework/horizontal/input.html
@@ -6,7 +6,7 @@
   {% endif %}
 
   <div class="col-sm-10">
-    <input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %}>
+    <input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %} {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}>
 
     {% if field.errors %}
       {% for error in field.errors %}
diff --git a/rest_framework/templates/rest_framework/inline/input.html b/rest_framework/templates/rest_framework/inline/input.html
@@ -5,5 +5,5 @@
     </label>
   {% endif %}
 
-  <input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %}>
+  <input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %} {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}>
 </div>
diff --git a/rest_framework/templates/rest_framework/vertical/input.html b/rest_framework/templates/rest_framework/vertical/input.html
@@ -3,7 +3,7 @@
     <label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
   {% endif %}
 
-  <input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %}>
+  <input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %} {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}>
 
   {% if field.errors %}
     {% for error in field.errors %}
