autofocus first form element

currently not working for date selection (calendar) since this one did not
support keyboard navigation

part of #94

Author: jelhan

app/components/bs-input.js

@@ -0,0 +1,4 @@
+import BsInput from 'ember-bootstrap/components/bs-input';
+import AutofocusSupport from 'croodle/mixins/autofocus-support';
+
+export default BsInput.extend(AutofocusSupport);

app/components/simple-select.js

@@ -1,5 +1,6 @@
 import SimpleSelect from 'ember-simple-select/components/simple-select';
+import AutofocusSupport from 'croodle/mixins/autofocus-support';
 
 export default SimpleSelect.reopen({
   classNames: ['form-control']
-});
+}).extend(AutofocusSupport);

app/mixins/autofocus-support.js

@@ -0,0 +1,16 @@
+import Ember from 'ember';
+
+const { on } = Ember;
+
+/*
+ * A work-a-round to support autofocus in Ember.js components.
+ * Background: https://github.com/emberjs/ember.js/issues/12589
+ */
+
+export default Ember.Mixin.create({
+  autofocusSupport: on('didInsertElement', function() {
+    if (this.get('autofocus')) {
+      this.$().focus();
+    }
+  })
+});

app/templates/components/bs-input.hbs

@@ -0,0 +1 @@
+{{yield}}

app/templates/components/create-options-datetime.hbs

@@ -34,6 +34,7 @@
           }}
             <div class="input-group">
               {{bs-input
+                autofocus=(unless index true false)
                 id=id
                 placeholder='00:00'
                 type='time'

app/templates/components/create-options-text.hbs

@@ -9,6 +9,7 @@
   }}
     <div class="input-group">
       {{bs-input
+        autofocus=(unless index true false)
         id=id
         value=value
       }}

app/templates/create/index.hbs

@@ -14,6 +14,7 @@
       as |value id|
     }}
       {{simple-select
+        autofocus=true
         id=id
         content=pollTypes
         optionLabelPath="label"

app/templates/create/meta.hbs

@@ -6,6 +6,7 @@
     action="submit"
   }}
     {{bs-form-element
+      autofocus=true
       classNames='title'
       controlType="text"
       label=(t 'create.meta.input.title.label')

app/templates/create/settings.hbs

@@ -14,6 +14,7 @@
       as |value id|
     }}
       {{simple-select
+        autofocus=true
         id=id
         content=answerTypes
         optionLabelPath="label"

app/templates/poll/participation.hbs

@@ -6,6 +6,7 @@
     novalidate=true
   }}
     {{bs-form-element
+      autofocus=true
       controlType='text'
       label=(t 'poll.input.newUserName.label')
       placeholder=(t 'poll.input.newUserName.placeholder')

tests/integration/components/bs-input-test.js

@@ -0,0 +1,24 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('bs-input', 'Integration | Component | bs input', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{bs-input}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#bs-input}}
+      template block text
+    {{/bs-input}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/unit/mixins/autofocus-support-test.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+import AutofocusSupportMixin from 'croodle/mixins/autofocus-support';
+import { module, test } from 'qunit';
+
+module('Unit | Mixin | autofocus support');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  let AutofocusSupportObject = Ember.Object.extend(AutofocusSupportMixin);
+  let subject = AutofocusSupportObject.create();
+  assert.ok(subject);
+});