Place focus on error block on page reload

This commit is contained in:
Corinne Durrmeyer 2024-10-04 10:26:18 +02:00
parent fbb7bd7989
commit 8ca1f82b01
No known key found for this signature in database
GPG key ID: DDC049DDA35585B6
2 changed files with 7 additions and 4 deletions

View file

@ -1,5 +1,6 @@
.fr-alert.fr-alert--error.fr-mb-3w{ role: "alertdialog" }
.fr-alert.fr-alert--error.fr-mb-3w{ role: 'alert' }
- if dedup_and_partitioned_errors.size > 0
%h3#sumup-errors.fr-alert__title= t('.sumup_html.title', count: dedup_and_partitioned_errors.size)
%h3#sumup-errors.fr-alert__title{ data: { controller: 'autofocus' }, tabindex: '-1' }
= t('.sumup_html.title', count: dedup_and_partitioned_errors.size)
%p= t('.sumup_html.content', count: dedup_and_partitioned_errors.size)
= render ExpandableErrorList.new(errors: dedup_and_partitioned_errors)

View file

@ -2,8 +2,10 @@ import { Controller } from '@hotwired/stimulus';
export class AutofocusController extends Controller {
connect() {
const element = this.element as HTMLInputElement;
const element = this.element as HTMLInputElement | HTMLElement;
element.focus();
element.setSelectionRange(0, element.value.length);
if ('value' in element) {
element.setSelectionRange(0, element.value.length);
}
}
}