2515 - Remove autofocus.js

app/assets/javascripts/autofocus.js

@@ -1,27 +0,0 @@
-(function(Modules) {
-  "use strict";
-
-  Modules.Autofocus = function() {
-    this.start = function(component) {
-      var $component = $(component),
-          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; }
-
-      // See if the component itself is something we want to send focus to
-      var target = $component.filter('input, textarea, select');
-
-      // Otherwise look inside the component to see if there are any elements
-      // we want to send focus to
-      if (target.length === 0) {
-        target = $('input, textarea, select', $component);
-      }
-
-      target.eq(0).trigger('focus');
-
-    };
-  };
-
-})(window.GOVUK.Modules);

app/templates/components/live-search.html

@@ -3,7 +3,7 @@
     show=False,
     form=None,
     label=None,
-    autofocus=False
+    autofocus=True
 ) %}
     {%- set search_label = label or form.search.label.text %}
 
@@ -13,7 +13,7 @@
     } %}
 
     {% if autofocus %}
-      {% set x=param_extensions.__setitem__("attributes", {"data-module": "autofocus"}) %}
+      {% set _ = param_extensions.__setitem__("attributes", {"autofocus": "autofocus"}) %}
     {% endif %}
 
     {% if show %}

app/templates/views/manage-users.html

@@ -30,13 +30,13 @@
   </div>
 
   {% if show_search_box %}
-    <div data-module="autofocus">
+    <div>
       {{ live_search(target_selector='.user-list-item', show=True, form=form) }}
     </div>
   {% endif %}
 
-  <div class="user-list">
     {% for user in users %}
+    <div class="user-list">
       {% if user.status != 'cancelled' %}
         <div class="user-list-item">
           <h2 class="user-list-item-heading font-body-lg margin-top-0" title="{{ user.email_address }}">
@@ -101,7 +101,7 @@
             {% endif %}
         </div>
       {% endif %}
+    </div>
     {% endfor %}
-  </div>
 
 {% endblock %}

app/templates/views/organizations/organization/users/index.html

@@ -24,13 +24,13 @@
   </h1>
 
   {% if show_search_box %}
-    <div data-module="autofocus">
+    <div>
       {{ live_search(target_selector='.user-list-item', show=True, form=form) }}
     </div>
   {% endif %}
 
-  <div class="user-list">
+  {% for user in users %}
-    {% for user in users %}
+    <div class="user-list">
       <div class="user-list-item">
         <div class="grid-row">
           <div class="grid-col-9">
@@ -60,8 +60,8 @@
           </div>
         </div>
       </div>
-    {% endfor %}
+    </div>
-  </div>
+  {% endfor %}
 
   <div class="js-stick-at-bottom-when-scrolling">
     {{ usaButton({

gulpfile.js

@@ -58,7 +58,6 @@ const javascripts = () => {
     paths.toolkit + 'javascripts/govuk/modules.js',
     paths.toolkit + 'javascripts/govuk/show-hide-content.js',
     paths.src + 'javascripts/copyToClipboard.js',
-    paths.src + 'javascripts/autofocus.js',
     paths.src + 'javascripts/enhancedTextbox.js',
     paths.src + 'javascripts/fileUpload.js',
     paths.src + 'javascripts/radioSelect.js',

tests/javascripts/autofocus.test.js

@@ -1,92 +0,0 @@
-const helpers = require('./support/helpers.js');
-
-beforeAll(() => {
-  require('../../app/assets/javascripts/autofocus.js');
-});
-
-afterAll(() => {
-  require('./support/teardown.js');
-});
-
-describe('Autofocus', () => {
-
-  const labelText = 'Search by name';
-  let focusHandler;
-  let search;
-
-  beforeEach(() => {
-
-    document.title = 'Find services by name - GOV.UK Notify';
-
-    // set up DOM
-    document.body.innerHTML =
-      `<div id="wrapper">
-        <label class="form-label" for="search">
-          ${labelText}
-        </label>
-        <input autocomplete="off" class="form-control form-control-1-1" id="search" name="search" type="search" value="" data-module="autofocus">
-      </div>`;
-
-    focusHandler = jest.fn();
-    search = document.getElementById('search');
-    search.addEventListener('focus', focusHandler, false);
-
-  });
-
-  afterEach(() => {
-
-    document.body.innerHTML = '';
-    search.removeEventListener('focus', focusHandler);
-    focusHandler = null;
-
-  });
-
-  test('is focused when modules start', () => {
-
-    // start module
-    window.GOVUK.modules.start();
-
-    expect(focusHandler).toHaveBeenCalled();
-
-  });
-
-  test('is focused when attribute is set on outer element', () => {
-
-    document.getElementById('search').removeAttribute('data-module');
-    document.getElementById('wrapper').setAttribute('data-module', 'autofocus');
-
-    // start module
-    window.GOVUK.modules.start();
-
-    expect(focusHandler).toHaveBeenCalled();
-
-  });
-
-  test('is not focused if the window has scrolled', () => {
-
-    // mock the window being scrolled 25px
-    $.prototype.scrollTop = jest.fn(() => 25);
-
-    // start module
-    window.GOVUK.modules.start();
-
-    expect(focusHandler).not.toHaveBeenCalled();
-
-  });
-
-  test('is focused if the window has scrolled but the force-focus flag is set', () => {
-
-    // mock the window being scrolled 25px
-    $.prototype.scrollTop = jest.fn(() => 25);
-
-    // set the force-focus flag
-    document.querySelector('#search').setAttribute('data-force-focus', true);
-
-    // start module
-    window.GOVUK.modules.start();
-
-    expect(focusHandler).toHaveBeenCalled();
-
-  });
-
-});