darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2025-12-09 06:33:52 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2522 from GSA/2515-remove-autofocus-js

Browse Source 
2515 - Remove autofocus.js
This commit is contained in:
Jonathan Bobel
2025-05-01 10:02:26 -04:00
committed by GitHub
parent 285bee3809 86b4547499
commit 824364f2b6
9 changed files with 20 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/assets/javascripts/autofocus.js
View File

@@ -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);

7
app/assets/sass/uswds/_main.scss
View File

@@ -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;

4
app/templates/components/live-search.html
View File

@@ -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 %}

6
app/templates/views/manage-users.html
View File

@@ -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 %}
{% endfor %}
</div>
{% endfor %}
{% endblock %}

6
app/templates/views/organizations/organization/users/index.html
View File

@@ -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 %}
<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>
{% endfor %}
<div class="js-stick-at-bottom-when-scrolling">
{{ usaButton({

1
gulpfile.js
View File

@@ -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',

5
tests/app/main/views/organizations/test_organizations.py
View File

@@ -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

2
tests/app/main/views/test_manage_users.py
View File

@@ -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

92
tests/javascripts/autofocus.test.js
View File

@@ -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();
});
});