Avoid loss of focus on .suspect-email closure

This commit is contained in:
Corinne Durrmeyer 2024-09-19 11:31:06 +02:00
parent 3de79e99e0
commit c88096859a
No known key found for this signature in database
GPG key ID: DDC049DDA35585B6
5 changed files with 16 additions and 6 deletions

View file

@ -74,4 +74,4 @@
.fr-fieldset__element.fr-fieldset__element--short-text{ "data-for-tiers-target" => "emailContainer", class: class_names(hidden: !email_notifications?(individual)) } .fr-fieldset__element.fr-fieldset__element--short-text{ "data-for-tiers-target" => "emailContainer", class: class_names(hidden: !email_notifications?(individual)) }
= render Dsfr::InputComponent.new(form: individual, attribute: :email, input_type: :email_field, opts: { "data-for-tiers-target" => "emailInput" }) = render Dsfr::InputComponent.new(form: individual, attribute: :email, input_type: :email_field, opts: { "data-for-tiers-target" => "emailInput" })
= f.submit t('views.users.dossiers.identite.continue'), class: "fr-btn" = f.submit t('views.users.dossiers.identite.continue'), class: "fr-btn", "data-email-input-target": "next"

View file

@ -44,15 +44,25 @@ export class EmailInputController extends ApplicationController {
} }
accept() { accept() {
this.ariaRegionTarget.setAttribute('aria-live', 'off');
hide(this.ariaRegionTarget); hide(this.ariaRegionTarget);
this.inputTarget.value = this.suggestionTarget.innerHTML; this.inputTarget.value = this.suggestionTarget.innerHTML;
this.suggestionTarget.innerHTML = ''; this.suggestionTarget.innerHTML = '';
const nextTarget = document.querySelector<HTMLElement>(
'[data-email-input-target="next"]'
);
if (nextTarget) {
nextTarget.focus();
}
} }
discard() { discard() {
this.ariaRegionTarget.setAttribute('aria-live', 'off');
hide(this.ariaRegionTarget); hide(this.ariaRegionTarget);
this.suggestionTarget.innerHTML = ''; this.suggestionTarget.innerHTML = '';
const nextTarget = document.querySelector<HTMLElement>(
'[data-email-input-target="next"]'
);
if (nextTarget) {
nextTarget.focus();
}
} }
} }

View file

@ -19,4 +19,4 @@
.fr-fieldset__element .fr-fieldset__element
= render Dsfr::InputComponent.new(form: f, attribute: :email, input_type: :email_field, opts: { autocomplete: 'email', autofocus: true }) = render Dsfr::InputComponent.new(form: f, attribute: :email, input_type: :email_field, opts: { autocomplete: 'email', autofocus: true })
= f.submit t('devise.passwords.new.request_new_password'), class: 'fr-btn fr-btn--lg fr-mt-4w' = f.submit t('devise.passwords.new.request_new_password'), class: 'fr-btn fr-btn--lg fr-mt-4w', 'data-email-input-target': 'next'

View file

@ -20,7 +20,7 @@
.fr-fieldset__element .fr-fieldset__element
= render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field, = render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field,
opts: { autofocus: 'true', autocomplete: 'new-password', data: { controller: 'turbo-input', turbo_input_url_value: show_password_complexity_path }, aria: {describedby: 'password_hint'}}) opts: { autofocus: 'true', autocomplete: 'new-password', data: { controller: 'turbo-input', turbo_input_url_value: show_password_complexity_path, email_input_target: 'next'}, aria: {describedby: 'password_hint'}})
#password_complexity #password_complexity
= render PasswordComplexityComponent.new = render PasswordComplexityComponent.new

View file

@ -18,7 +18,7 @@
.fr-fieldset__element= render Dsfr::InputComponent.new(form: f, attribute: :email, input_type: :email_field, opts: { autocomplete: 'email', autofocus: true }) .fr-fieldset__element= render Dsfr::InputComponent.new(form: f, attribute: :email, input_type: :email_field, opts: { autocomplete: 'email', autofocus: true })
.fr-fieldset__element .fr-fieldset__element
= render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field, opts: { autocomplete: 'current-password' }) = render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field, opts: { autocomplete: 'current-password', 'data-email-input-target': 'next' })
%p= link_to t('views.users.sessions.new.reset_password'), new_user_password_path, class: "fr-link" %p= link_to t('views.users.sessions.new.reset_password'), new_user_password_path, class: "fr-link"