Place focus on error block on page reload
This commit is contained in:
parent
fbb7bd7989
commit
8ca1f82b01
2 changed files with 7 additions and 4 deletions
|
@ -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
|
- 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)
|
%p= t('.sumup_html.content', count: dedup_and_partitioned_errors.size)
|
||||||
= render ExpandableErrorList.new(errors: dedup_and_partitioned_errors)
|
= render ExpandableErrorList.new(errors: dedup_and_partitioned_errors)
|
||||||
|
|
|
@ -2,8 +2,10 @@ import { Controller } from '@hotwired/stimulus';
|
||||||
|
|
||||||
export class AutofocusController extends Controller {
|
export class AutofocusController extends Controller {
|
||||||
connect() {
|
connect() {
|
||||||
const element = this.element as HTMLInputElement;
|
const element = this.element as HTMLInputElement | HTMLElement;
|
||||||
element.focus();
|
element.focus();
|
||||||
element.setSelectionRange(0, element.value.length);
|
if ('value' in element) {
|
||||||
|
element.setSelectionRange(0, element.value.length);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue