From 693ddadbc4a0c91c2a60344a30466ce3249680be Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 1 Feb 2019 16:13:04 +0000
Subject: [PATCH] Deal with focus state following cancelation

Follows pattern from dialogs whereby focus returns
to the button/link that fired the dialog when it
closes.
---
 app/assets/javascripts/templateFolderForm.js    | 17 +++++++++++------
 .../components/stick-at-top-when-scrolling.scss |  8 ++++----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/templateFolderForm.js b/app/assets/javascripts/templateFolderForm.js
index 2f97a24b6..78a3e51e6 100644
--- a/app/assets/javascripts/templateFolderForm.js
+++ b/app/assets/javascripts/templateFolderForm.js
@@ -35,7 +35,7 @@
       // first off show the new template / new folder buttons
       this.currentState = this.$form.data('prev-state') || 'unknown';
       if (this.currentState === 'unknown') {
-        this.selectActionButtons();
+        this.selectActionButtons(false);
       } else {
         this.render();
       }
@@ -75,6 +75,7 @@
     };
 
     this.addCancelButton = function(state) {
+      let selector = `[value=${state.key}]`;
       let $cancel = this.makeButton('Cancel', () => {
 
         // clear existing data
@@ -82,8 +83,8 @@
         state.$el.find('input:text').val('');
 
         // go back to action buttons
-        this.selectActionButtons();
-      });
+        this.selectActionButtons(selector);
+      }, selector);
 
       state.$el.find('[type=submit]').after($cancel);
     };
@@ -91,7 +92,6 @@
     this.addClearButton = function(state) {
 
       let $clear = this.makeButton('Clear', () => {
-
         // uncheck all templates and folders
         this.$form.find('input:checkbox').prop('checked', false);
 
@@ -102,9 +102,10 @@
       state.$el.find('.template-list-selected-counter').append($clear);
     };
 
-    this.makeButton = (text, fn) => $('<a></a>')
+    this.makeButton = (text, fn, cancelSelector) => $('<a></a>')
       .html(text)
       .addClass('js-cancel')
+      .data('target', cancelSelector) // isn't set if cancelSelector is undefined
       .attr('tabindex', '0')
       .on('click keydown', event => {
         // space, enter or no keyCode (must be mouse input)
@@ -114,12 +115,16 @@
         }
       });
 
-    this.selectActionButtons = function () {
+    this.selectActionButtons = function (targetSelector) {
       // If we want to show one of the grey choose actions state, we can pretend we're in the choose actions state,
       // and then pretend a checkbox was clicked to work out whether to show zero or non-zero options.
       // This calls a render at the end
       this.currentState = 'nothing-selected-buttons';
       this.templateFolderCheckboxChanged();
+      if (targetSelector) {
+        let setFocus = this.getFocusRoutine(targetSelector, false);
+        setFocus();
+      }
     };
 
     this.actionButtonClicked = function(event) {
diff --git a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
index a787710cd..dc737b5f3 100644
--- a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
+++ b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
@@ -1,6 +1,8 @@
 // CSS adapted from
 // https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling
 
+$sticky-padding: $gutter * 2 / 3;
+
 .js-stick-at-top-when-scrolling,
 .js-stick-at-bottom-when-scrolling {
 
@@ -44,11 +46,9 @@
 
 .js-stick-at-bottom-when-scrolling {
 
-  $vertical-padding: $gutter * 2 / 3;
-
   transition: bottom 0.1s ease-out, box-shadow 1s ease-in-out;
-  padding: $vertical-padding 0 $vertical-padding $gutter-half;
-  margin-top: -$vertical-padding;
+  padding: $sticky-padding 0 $sticky-padding $gutter-half;
+  margin-top: -$sticky-padding;
 
   & + .js-stick-at-bottom-when-scrolling {
     margin-top: ($sticky-padding * 2) * -1;