diff --git a/app/assets/javascripts/autofocus.js b/app/assets/javascripts/autofocus.js deleted file mode 100644 index b688a9f20..000000000 --- a/app/assets/javascripts/autofocus.js +++ /dev/null @@ -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); diff --git a/app/assets/sass/uswds/_main.scss b/app/assets/sass/uswds/_main.scss index 983a72c8c..88e44042d 100644 --- a/app/assets/sass/uswds/_main.scss +++ b/app/assets/sass/uswds/_main.scss @@ -345,8 +345,13 @@ h2.recipient-list { } } -// Button ellipses loading +.usa-search__input, [type=search] { + border-right: 1px solid; + height: 40px; + margin-top: units(1); +} +// Button ellipses loading .dot-anim::after { content: '.'; animation: dotPulse 1.5s steps(3, end) infinite; diff --git a/app/templates/components/live-search.html b/app/templates/components/live-search.html index 58683e957..4f5ad3313 100644 --- a/app/templates/components/live-search.html +++ b/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 %} diff --git a/app/templates/views/manage-users.html b/app/templates/views/manage-users.html index 38c87c3bf..4b36e25eb 100644 --- a/app/templates/views/manage-users.html +++ b/app/templates/views/manage-users.html @@ -30,13 +30,13 @@ {% if show_search_box %} -
+
{{ live_search(target_selector='.user-list-item', show=True, form=form) }}
{% endif %} -
{% for user in users %} +
{% if user.status != 'cancelled' %}

@@ -101,7 +101,7 @@ {% endif %}

{% endif %} +
{% endfor %} -
{% endblock %} diff --git a/app/templates/views/organizations/organization/users/index.html b/app/templates/views/organizations/organization/users/index.html index f0c667977..770189fb4 100644 --- a/app/templates/views/organizations/organization/users/index.html +++ b/app/templates/views/organizations/organization/users/index.html @@ -24,13 +24,13 @@ {% if show_search_box %} -
+
{{ live_search(target_selector='.user-list-item', show=True, form=form) }}
{% endif %} -
- {% for user in users %} + {% for user in users %} +
@@ -60,8 +60,8 @@
- {% endfor %} -
+
+ {% endfor %}
{{ usaButton({ diff --git a/gulpfile.js b/gulpfile.js index 0caef98eb..b8ae218a7 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -59,7 +59,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', diff --git a/tests/app/main/views/organizations/test_organizations.py b/tests/app/main/views/organizations/test_organizations.py index f04937e9b..d85352522 100644 --- a/tests/app/main/views/organizations/test_organizations.py +++ b/tests/app/main/views/organizations/test_organizations.py @@ -815,8 +815,9 @@ def test_manage_org_users_should_show_live_search_if_more_than_7_users( ) assert len(page.select(".user-list-item")) == number_of_users - textbox = page.select_one("[data-module=autofocus] .usa-input") - assert "value" not in textbox + textbox = page.select_one(".usa-input") + assert textbox is not None + assert textbox.get("value") is None assert textbox["name"] == "search" # data-module=autofocus is set on a containing element so it # shouldn’t also be set on the textbox itself diff --git a/tests/app/main/views/test_manage_users.py b/tests/app/main/views/test_manage_users.py index 7b0b1d9e4..1d47b098d 100644 --- a/tests/app/main/views/test_manage_users.py +++ b/tests/app/main/views/test_manage_users.py @@ -186,7 +186,7 @@ def test_should_show_live_search_if_more_than_7_users( ) assert len(page.select(".user-list-item")) == number_of_users - textbox = page.select_one("[data-module=autofocus] .usa-input") + textbox = page.select_one(".usa-input") assert "value" not in textbox assert textbox["name"] == "search" # data-module=autofocus is set on a containing element so it diff --git a/tests/javascripts/autofocus.test.js b/tests/javascripts/autofocus.test.js deleted file mode 100644 index 3617ca1d9..000000000 --- a/tests/javascripts/autofocus.test.js +++ /dev/null @@ -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 = - `
- - -
`; - - 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(); - - }); - -});