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:
Tom Byers
2019-03-28 16:45:36 +00:00
parent 1984128d1f
commit 8d5e7e70ab
2 changed files with 9 additions and 3 deletions

View File

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

View File

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