mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-03-10 05:12:52 -04:00
Prevent autofocus when page has scrolled
If users scroll a page with an autofocus component on so it is off-screen it seems safe to assume they won't want it focused if they return to it. This prevents that happening. This adds a data-attribute flag to allow this behaviour to be overridden. We have some situations where the assumption here isn't appropriate, for example on pages where the component with autofocus is in a sticky element. This means it will appear offscreen when the page loads but, when its parent becomes sticky, will be visible again.
This commit is contained in:
@@ -2,9 +2,14 @@
|
||||
"use strict";
|
||||
|
||||
Modules.Autofocus = function() {
|
||||
this.start = function(component) {
|
||||
this.start = function($component) {
|
||||
var forceFocus = $component.data('forceFocus');
|
||||
|
||||
$('input, textarea, select', component).eq(0).trigger('focus');
|
||||
// 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; }
|
||||
|
||||
$('input, textarea, select', $component).eq(0).trigger('focus');
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
@@ -16,7 +16,8 @@
|
||||
|
||||
{% call form_wrapper(
|
||||
class='js-stick-at-top-when-scrolling send-one-off-form' if template.template_type != 'sms' else 'send-one-off-form',
|
||||
module="autofocus"
|
||||
module="autofocus",
|
||||
data_kwargs={'forceFocus': True}
|
||||
) %}
|
||||
<div class="grid-row">
|
||||
<div class="column-two-thirds {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}">
|
||||
|
||||
Reference in New Issue
Block a user