Make controls re-render only when state changed

Adds a guard around all calls to `.render()` after
the first one (which sets the initial state) to
prevent DOM manipulation when not needed.

The original behaviour meant the action buttons
were re-rendered when items from the list of
templates/folders were selected/deselected, even
if the state hadn't changed. This meant, in some
cases, focus was shifted to the buttons when you
were still selecting/deselecting.

app/assets/javascripts/templateFolderForm.js

@@ -33,10 +33,11 @@
       this.activateStickyElements();
 
       // first off show the new template / new folder buttons
-      this.currentState = this.$form.data('prev-state') || 'unknown';
-      if (this.currentState === 'unknown') {
+      this._lastState = this.$form.data('prev-state');
+      if (this._lastState === undefined) {
         this.selectActionButtons();
       } else {
+        this.currentState = this._lastState;
         this.render();
       }
 
@@ -144,11 +145,21 @@
       }
     };
 
+    // method that checks the state against the last one, used prior to render() to see if needed
+    this.stateChanged = function() {
+      let changed = this.currentState !== this._lastState;
+
+      this._lastState = this.currentState;
+      return changed;
+    };
+
     this.actionButtonClicked = function(event) {
       event.preventDefault();
       this.currentState = $(event.currentTarget).val();
 
-      this.render();
+      if (this.stateChanged()) {
+        this.render();
+      }
     };
 
     this.selectionStatus = {
@@ -173,7 +184,9 @@
         this.currentState = 'nothing-selected-buttons';
       }
 
-      this.render();
+      if (this.stateChanged()) {
+        this.render();
+      }
 
       this.selectionStatus.update(numSelected);