From 8d5e7e70abfc8b8db2487eced70f3317da9e1aef Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Thu, 28 Mar 2019 16:45:36 +0000
Subject: [PATCH 1/3] Prevent autofocus when page has scrolled

If users scroll a page with an autofocus component
on so it is off-screen it seems safe to assume
they won't want it focused if they return to it.

This prevents that happening.

This adds a data-attribute flag to allow this
behaviour to be overridden.

We have some situations where the assumption here
isn't appropriate, for example on pages where the
component with autofocus is in a sticky element.
This means it will appear offscreen when the page
loads but, when its parent becomes sticky, will be
visible again.
---
 app/assets/javascripts/autofocus.js | 9 +++++++--
 app/templates/views/send-test.html  | 3 ++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/autofocus.js b/app/assets/javascripts/autofocus.js
index 2d276953f..299914e4b 100644
--- a/app/assets/javascripts/autofocus.js
+++ b/app/assets/javascripts/autofocus.js
@@ -2,9 +2,14 @@
   "use strict";
 
   Modules.Autofocus = function() {
-    this.start = function(component) {
+    this.start = function($component) {
+      var forceFocus = $component.data('forceFocus');
 
-      $('input, textarea, select', component).eq(0).trigger('focus');
+      // if the page loads with a scroll position, we can't assume the item to focus onload
+      // is still where users intend to start
+      if (($(window).scrollTop() > 0) && !forceFocus) { return; }
+
+      $('input, textarea, select', $component).eq(0).trigger('focus');
 
     };
   };
diff --git a/app/templates/views/send-test.html b/app/templates/views/send-test.html
index c84c5fbce..967f72a08 100644
--- a/app/templates/views/send-test.html
+++ b/app/templates/views/send-test.html
@@ -16,7 +16,8 @@
 
   {% call form_wrapper(
     class='js-stick-at-top-when-scrolling send-one-off-form' if template.template_type != 'sms' else 'send-one-off-form',
-    module="autofocus"
+    module="autofocus",
+    data_kwargs={'forceFocus': True}
   ) %}
     <div class="grid-row">
       <div class="column-two-thirds {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}">

From cb55fbb344174311215feef90a500ab768e082a9 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 2 Apr 2019 11:38:27 +0100
Subject: [PATCH 2/3] Fix reference to non-existent jQuery collection

Raised on PR as comment:

https://github.com/alphagov/notifications-admin/pull/2880/commits/e4b4be9d459b73196bb5c403cdec881f68462440#r270781103
---
 app/assets/javascripts/autofocus.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/autofocus.js b/app/assets/javascripts/autofocus.js
index 299914e4b..c280b7454 100644
--- a/app/assets/javascripts/autofocus.js
+++ b/app/assets/javascripts/autofocus.js
@@ -2,14 +2,14 @@
   "use strict";
 
   Modules.Autofocus = function() {
-    this.start = function($component) {
-      var forceFocus = $component.data('forceFocus');
+    this.start = function(component) {
+      var forceFocus = $(component).data('forceFocus');
 
       // if the page loads with a scroll position, we can't assume the item to focus onload
       // is still where users intend to start
       if (($(window).scrollTop() > 0) && !forceFocus) { return; }
 
-      $('input, textarea, select', $component).eq(0).trigger('focus');
+      $('input, textarea, select', component).eq(0).trigger('focus');
 
     };
   };

From cf07579a6bcc2c4729ac881d9c286df12e7fc97a Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 3 Apr 2019 14:23:07 +0100
Subject: [PATCH 3/3] Correct name of forceFocus data attribute

Data attributes need to be '-' separated strings
in the HTML to appear as camelCase keys in the
`.dataset` (`.data()` in jQuery) property.

This corrects the assumption that the camelCasing
would carry through from the HTML.

More info:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
---
 app/templates/views/send-test.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/templates/views/send-test.html b/app/templates/views/send-test.html
index 967f72a08..8764b5479 100644
--- a/app/templates/views/send-test.html
+++ b/app/templates/views/send-test.html
@@ -17,7 +17,7 @@
   {% call form_wrapper(
     class='js-stick-at-top-when-scrolling send-one-off-form' if template.template_type != 'sms' else 'send-one-off-form',
     module="autofocus",
-    data_kwargs={'forceFocus': True}
+    data_kwargs={'force-focus': True}
   ) %}
     <div class="grid-row">
       <div class="column-two-thirds {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}">