From 8d8ee8ae555221798b920271cb77b031452c1c3c Mon Sep 17 00:00:00 2001
From: Christian <brickhouse@stanford.edu>
Date: Wed, 23 Sep 2020 21:05:42 -0700
Subject: [PATCH 1/2] survey-html-form: add autofocus parameter

Users can provide the id of an element to focus on when the
slide is displayed. While HTML5 has an autofocus parameter
it is not universal and not all browsers support it. This
solution should work across browsers and is more in keeping
with the jsPsych object style.

Issue #1062
---
 examples/jspsych-survey-html-form.html |  9 ++++++++-
 plugins/jspsych-survey-html-form.js    | 12 +++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/examples/jspsych-survey-html-form.html b/examples/jspsych-survey-html-form.html
index 0a95079c..d326ddf2 100644
--- a/examples/jspsych-survey-html-form.html
+++ b/examples/jspsych-survey-html-form.html
@@ -16,8 +16,15 @@
 	html: '<p> I am feeling <input name="first" type="text" />, <input name="second" type="text" />, and <input name="third" type="text" />.</p>'
 	}
 
+	var autofocus_trial = {
+		type: 'survey-html-form',
+		preamble: '<p> What is your favorite bird?</p>',
+		html: '<p>MY favorite bird is <input type="text" id="test-resp-box" name="response" size="10" /></p>',
+		autofocus: 'test-resp-box'
+	}
+
 	jsPsych.init({
-		timeline: [form_trial],
+		timeline: [form_trial,autofocus_trial],
 		on_finish: function(){ jsPsych.data.displayData(); }
 	});
 
diff --git a/plugins/jspsych-survey-html-form.js b/plugins/jspsych-survey-html-form.js
index 2d6cebdb..ba87966e 100644
--- a/plugins/jspsych-survey-html-form.js
+++ b/plugins/jspsych-survey-html-form.js
@@ -34,6 +34,12 @@ jsPsych.plugins['survey-html-form'] = (function() {
         default:  'Continue',
         description: 'The text that appears on the button to finish the trial.'
       },
+      autofocus: {
+	type: jsPsych.plugins.parameterType.STRING,
+	pretty_name: 'Element ID to focus',
+	default: '',
+	description: 'The HTML element ID of a form field to autofocus on.'
+      },
       dataAsArray: {
         type: jsPsych.plugins.parameterType.BOOLEAN,
         pretty_name: 'Data As Array',
@@ -59,9 +65,13 @@ jsPsych.plugins['survey-html-form'] = (function() {
     // add submit button
     html += '<input type="submit" id="jspsych-survey-html-form-next" class="jspsych-btn jspsych-survey-html-form" value="'+trial.button_label+'"></input>';
 
-    html += '</form>'
+    html += '</form>';
     display_element.innerHTML = html;
 
+    if ( trial.autofocus !== '' ) {
+      display_element.querySelector('#'+trial.autofocus).focus();
+    }
+
     display_element.querySelector('#jspsych-survey-html-form').addEventListener('submit', function(event) {
       // don't submit form
       event.preventDefault();

From ebb6fce877797d3f2deaec79486c1e14857d0a64 Mon Sep 17 00:00:00 2001
From: Christian <brickhouse@stanford.edu>
Date: Thu, 1 Oct 2020 19:45:49 -0700
Subject: [PATCH 2/2] survey-html-form: validate autofocus parameter

When the autofocus parameter is set, check that
the specified element exists in the DOM and
check that the specified ID is unique. If there
is not exactly 1 element with the given ID, warn
the user about unexpected behavior.
---
 plugins/jspsych-survey-html-form.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/plugins/jspsych-survey-html-form.js b/plugins/jspsych-survey-html-form.js
index ba87966e..357e2325 100644
--- a/plugins/jspsych-survey-html-form.js
+++ b/plugins/jspsych-survey-html-form.js
@@ -69,7 +69,14 @@ jsPsych.plugins['survey-html-form'] = (function() {
     display_element.innerHTML = html;
 
     if ( trial.autofocus !== '' ) {
-      display_element.querySelector('#'+trial.autofocus).focus();
+      var focus_elements = display_element.querySelectorAll('#'+trial.autofocus);
+      if ( focus_elements.length === 0 ) {
+	      console.warn('No element found with id: '+trial.autofocus);
+      } else if ( focus_elements.length > 1 ) {
+	      console.warn('The id "'+trial.autofocus+'" is not unique so autofocus will not work.')
+      } else {
+	      focus_elements[0].focus()
+      }
     }
 
     display_element.querySelector('#jspsych-survey-html-form').addEventListener('submit', function(event) {